Скрыть один div на зависании другого div

Я создаю навигацию по боковой панели. Я хочу, чтобы круги (.circle-indicator) исчезли, когда боковая панель (.nav-sidebar) расширяется при наведении. Можно ли это сделать с помощью CSS или мне нужно использовать javascript? Как мне это сделать?Скрыть один div на зависании другого div

Вот код страницы

body { 
 
    margin:-20px; 
 
} 
 

 
.nav-sidebar { 
 
    position:fixed; 
 
    width:10px; 
 
    background-color:#000; 
 
    color:#fff; 
 
    height: 100vh; 
 
    padding: 100px 20px 0 20px; 
 
    white-space: nowrap; 
 
}  
 

 
.nav-sidebar:hover { 
 
    width:300px; 
 
    transition-duration:1s; 
 

 
} 
 

 
.nav-sidebar a { 
 
    color:#fff; 
 
    text-decoration: none; 
 
    font-size: 2em; 
 
} 
 

 
.nav-sidebar ul { 
 
    list-style:none; 
 
} 
 

 
.nav-sidebar sidebar-links li { 
 
    padding-bottom:1em; 
 
} 
 

 
.nav-sidebar .circle-indicator { 
 
    position:fixed; 
 
    left:-33px; 
 
    top:40vh; 
 
} 
 

 
.nav-sidebar .circle-indicator ul li { 
 
    margin-bottom:1em; 
 
    display:block; 
 
    border:1px solid #fff; 
 
    border-radius: 10px; 
 
    width:10px; 
 
    height:10px; 
 
    padding:0; 
 
} 
 

 
.nav-sidebar .circle-indicator ul li a:active { 
 
    background-color:#fff; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"/>  
 
</head> 
 
    
 
<body> 
 
    <div class="nav-sidebar"> 
 
     <div class="circle-indicator"> 
 
      <ul> 
 
       <li><a href="#" alt="Item 1"></a></li> 
 
       <li><a href="#" alt="Item 2"></a></li> 
 
       <li><a href="#" alt="Item 3"></a></li> 
 
       <li><a href="#" alt="Item 4"></a></li> 
 
       <li><a href="#" alt="Item 5"></a></li> 
 
      </ul> 
 
     </div> <!-- end circle-indicator --> 
 
     <div class="sidebar-links"> 
 
      <ul> 
 
       <li><a href="#" alt="Item 1">Item 1</a></li> 
 
       <li><a href="#" alt="Item 2">Item 2</a></li> 
 
       <li><a href="#" alt="Item 3">Item 3</a></li> 
 
       <li><a href="#" alt="Item 4">Item 4</a></li> 
 
       <li><a href="#" alt="Item 5">Item 5</a></li> 
 
      </ul> 
 
     </div> <!-- end sidebar-links --> 
 
    </div> <!-- end nav-sidebar --> 
 
</body> 
 
</html>

источник

2016-12-18 gouldei

Вы можете попробовать его с непрозрачностью, как некоторыеnswers, но переместите «продолжительность перехода» в простую «.nav-sidebar», чтобы сделать ее приятной и гладкой на выходе мыши. – yomisimie

Не могли бы вы сообщить мне, что не работает с ответом дано, так что я смогу приспособиться, и вы согласитесь? – LGSon

Использование

.nav-sidebar:hover .circle-indicator{ 
    display:none; 
}

body { 
 
    margin:-20px; 
 
} 
 

 
.nav-sidebar { 
 
    position:fixed; 
 
    width:10px; 
 
    background-color:#000; 
 
    color:#fff; 
 
    height: 100vh; 
 
    padding: 100px 20px 0 20px; 
 
    white-space: nowrap; 
 
}  
 

 
.nav-sidebar:hover { 
 
    width:300px; 
 
    transition-duration:1s; 
 

 
} 
 

 
.nav-sidebar a { 
 
    color:#fff; 
 
    text-decoration: none; 
 
    font-size: 2em; 
 
} 
 

 
.nav-sidebar ul { 
 
    list-style:none; 
 
} 
 

 
.nav-sidebar sidebar-links li { 
 
    padding-bottom:1em; 
 
} 
 

 
.nav-sidebar .circle-indicator { 
 
    position:fixed; 
 
    left:-33px; 
 
    top:40vh; 
 
} 
 

 
.nav-sidebar .circle-indicator ul li { 
 
    margin-bottom:1em; 
 
    display:block; 
 
    border:1px solid #fff; 
 
    border-radius: 10px; 
 
    width:10px; 
 
    height:10px; 
 
    padding:0; 
 
} 
 

 
.nav-sidebar .circle-indicator ul li a:active { 
 
    background-color:#fff; 
 
} 
 

 
.nav-sidebar:hover .circle-indicator{ 
 
    display:none; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"/>  
 
</head> 
 
    
 
<body> 
 
    <div class="nav-sidebar"> 
 
     <div class="circle-indicator"> 
 
      <ul> 
 
       <li><a href="#" alt="Item 1"></a></li> 
 
       <li><a href="#" alt="Item 2"></a></li> 
 
       <li><a href="#" alt="Item 3"></a></li> 
 
       <li><a href="#" alt="Item 4"></a></li> 
 
       <li><a href="#" alt="Item 5"></a></li> 
 
      </ul> 
 
     </div> <!-- end circle-indicator --> 
 
     <div class="sidebar-links"> 
 
      <ul> 
 
       <li><a href="#" alt="Item 1">Item 1</a></li> 
 
       <li><a href="#" alt="Item 2">Item 2</a></li> 
 
       <li><a href="#" alt="Item 3">Item 3</a></li> 
 
       <li><a href="#" alt="Item 4">Item 4</a></li> 
 
       <li><a href="#" alt="Item 5">Item 5</a></li> 
 
      </ul> 
 
     </div> <!-- end sidebar-links --> 
 
    </div> <!-- end nav-sidebar --> 
 
</body> 
 
</html>

источник

2016-12-18 21:07:31 Brad

Это правило будет делать

.nav-sidebar:hover .circle-indicator { 
    display: none; 
}

Или с переходом

.nav-sidebar:hover .circle-indicator { 
    opacity: 0; 
    transition: opacity 0.5s; 
}

Образец сниппет

body { 
 
    margin:-20px; 
 
} 
 

 
.nav-sidebar { 
 
    position:fixed; 
 
    width:10px; 
 
    background-color:#000; 
 
    color:#fff; 
 
    height: 100vh; 
 
    padding: 100px 20px 0 20px; 
 
    white-space: nowrap; 
 
}  
 

 
.nav-sidebar:hover { 
 
    width:300px; 
 
    transition-duration:1s; 
 

 
} 
 
.nav-sidebar:hover .circle-indicator { 
 
    opacity: 0; 
 
    transition: opacity 0.5s; 
 
} 
 

 
.nav-sidebar a { 
 
    color:#fff; 
 
    text-decoration: none; 
 
    font-size: 2em; 
 
} 
 

 
.nav-sidebar ul { 
 
    list-style:none; 
 
} 
 

 
.nav-sidebar sidebar-links li { 
 
    padding-bottom:1em; 
 
} 
 

 
.nav-sidebar .circle-indicator { 
 
    position:fixed; 
 
    left:-33px; 
 
    top:40vh; 
 
} 
 

 
.nav-sidebar .circle-indicator ul li { 
 
    margin-bottom:1em; 
 
    display:block; 
 
    border:1px solid #fff; 
 
    border-radius: 10px; 
 
    width:10px; 
 
    height:10px; 
 
    padding:0; 
 
} 
 

 
.nav-sidebar .circle-indicator ul li a:active { 
 
    background-color:#fff; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"/>  
 
</head> 
 
    
 
<body> 
 
    <div class="nav-sidebar"> 
 
     <div class="circle-indicator"> 
 
      <ul> 
 
       <li><a href="#" alt="Item 1"></a></li> 
 
       <li><a href="#" alt="Item 2"></a></li> 
 
       <li><a href="#" alt="Item 3"></a></li> 
 
       <li><a href="#" alt="Item 4"></a></li> 
 
       <li><a href="#" alt="Item 5"></a></li> 
 
      </ul> 
 
     </div> <!-- end circle-indicator --> 
 
     <div class="sidebar-links"> 
 
      <ul> 
 
       <li><a href="#" alt="Item 1">Item 1</a></li> 
 
       <li><a href="#" alt="Item 2">Item 2</a></li> 
 
       <li><a href="#" alt="Item 3">Item 3</a></li> 
 
       <li><a href="#" alt="Item 4">Item 4</a></li> 
 
       <li><a href="#" alt="Item 5">Item 5</a></li> 
 
      </ul> 
 
     </div> <!-- end sidebar-links --> 
 
    </div> <!-- end nav-sidebar --> 
 
</body> 
 
</html>

источник

2016-12-18 21:07:52 LGSon

Хорошие ответы на LGSon и Брэда, но я» d сделать это с opacity и transition. Вы не можете перейти dispay: none

body { 
 
    margin:-20px; 
 
} 
 

 
.nav-sidebar { 
 
    position:fixed; 
 
    width:10px; 
 
    background-color:#000; 
 
    color:#fff; 
 
    height: 100vh; 
 
    padding: 100px 20px 0 20px; 
 
    white-space: nowrap; 
 
}  
 

 
.nav-sidebar:hover { 
 
    width:300px; 
 
    transition-duration:1s; 
 

 
} 
 

 
.nav-sidebar a { 
 
    color:#fff; 
 
    text-decoration: none; 
 
    font-size: 2em; 
 
} 
 

 
.nav-sidebar ul { 
 
    list-style:none; 
 
} 
 

 
.nav-sidebar sidebar-links li { 
 
    padding-bottom:1em; 
 
} 
 

 
.nav-sidebar .circle-indicator { 
 
    position:fixed; 
 
    left:-33px; 
 
    top:40vh; 
 
\t transition: opacity 1s; 
 
} 
 

 
.nav-sidebar .circle-indicator ul li { 
 
    margin-bottom:1em; 
 
    display:block; 
 
    border:1px solid #fff; 
 
    border-radius: 10px; 
 
    width:10px; 
 
    height:10px; 
 
    padding:0; 
 
} 
 

 
.nav-sidebar .circle-indicator ul li a:active { 
 
    background-color:#fff; 
 
} 
 

 
.nav-sidebar:hover .circle-indicator { 
 
\t opacity: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"/>  
 
</head> 
 
    
 
<body> 
 
    <div class="nav-sidebar"> 
 
     <div class="circle-indicator"> 
 
      <ul> 
 
       <li><a href="#" alt="Item 1"></a></li> 
 
       <li><a href="#" alt="Item 2"></a></li> 
 
       <li><a href="#" alt="Item 3"></a></li> 
 
       <li><a href="#" alt="Item 4"></a></li> 
 
       <li><a href="#" alt="Item 5"></a></li> 
 
      </ul> 
 
     </div> <!-- end circle-indicator --> 
 
     <div class="sidebar-links"> 
 
      <ul> 
 
       <li><a href="#" alt="Item 1">Item 1</a></li> 
 
       <li><a href="#" alt="Item 2">Item 2</a></li> 
 
       <li><a href="#" alt="Item 3">Item 3</a></li> 
 
       <li><a href="#" alt="Item 4">Item 4</a></li> 
 
       <li><a href="#" alt="Item 5">Item 5</a></li> 
 
      </ul> 
 
     </div> <!-- end sidebar-links --> 
 
    </div> <!-- end nav-sidebar --> 
 
</body> 
 
</html>

источник

2016-12-18 21:09:50

Ну, я тоже с этим тоже .... – LGSon

О, извините, LGSon. Не видел, что –

Вы можете создать этот эффект со следующими стилями

<style> 
    .nav-sidebar:hover .circle-indicator { 
    display:none; 
    } 
</style>

body { 
 
    margin:-20px; 
 
} 
 

 
.nav-sidebar { 
 
    position:fixed; 
 
    width:10px; 
 
    background-color:#000; 
 
    color:#fff; 
 
    height: 100vh; 
 
    padding: 100px 20px 0 20px; 
 
    white-space: nowrap; 
 
}  
 

 
.nav-sidebar:hover { 
 
    width:300px; 
 
    transition-duration:1s; 
 

 
} 
 

 
.nav-sidebar a { 
 
    color:#fff; 
 
    text-decoration: none; 
 
    font-size: 2em; 
 
} 
 

 
.nav-sidebar ul { 
 
    list-style:none; 
 
} 
 

 
.nav-sidebar sidebar-links li { 
 
    padding-bottom:1em; 
 
} 
 

 
.nav-sidebar .circle-indicator { 
 
    position:fixed; 
 
    left:-33px; 
 
    top:40vh; 
 
} 
 

 
.nav-sidebar .circle-indicator ul li { 
 
    margin-bottom:1em; 
 
    display:block; 
 
    border:1px solid #fff; 
 
    border-radius: 10px; 
 
    width:10px; 
 
    height:10px; 
 
    padding:0; 
 
} 
 

 
.nav-sidebar .circle-indicator ul li a:active { 
 
    background-color:#fff; 
 
} 
 

 
.nav-sidebar:hover .circle-indicator { 
 
    display:none; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"/>  
 
</head> 
 
    
 
<body> 
 
    <div class="nav-sidebar"> 
 
     <div class="circle-indicator"> 
 
      <ul> 
 
       <li><a href="#" alt="Item 1"></a></li> 
 
       <li><a href="#" alt="Item 2"></a></li> 
 
       <li><a href="#" alt="Item 3"></a></li> 
 
       <li><a href="#" alt="Item 4"></a></li> 
 
       <li><a href="#" alt="Item 5"></a></li> 
 
      </ul> 
 
     </div> <!-- end circle-indicator --> 
 
     <div class="sidebar-links"> 
 
      <ul> 
 
       <li><a href="#" alt="Item 1">Item 1</a></li> 
 
       <li><a href="#" alt="Item 2">Item 2</a></li> 
 
       <li><a href="#" alt="Item 3">Item 3</a></li> 
 
       <li><a href="#" alt="Item 4">Item 4</a></li> 
 
       <li><a href="#" alt="Item 5">Item 5</a></li> 
 
      </ul> 
 
     </div> <!-- end sidebar-links --> 
 
    </div> <!-- end nav-sidebar --> 
 
</body> 
 
</html>

источник

2016-12-18 21:09:54 bob

Скрыть один div на зависании другого div

ответ

Смежные вопросы