我正在创建侧边栏导航。当侧边栏 (.nav-sidebar) 在悬停时展开时，我希望圆圈 (.circle-indicator) 消失。这可以用 CSS 完成还是我需要使用 javascript？我该怎么做？
这是页面的代码
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>最佳答案
使用
.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>关于javascript - 在悬停另一个 div 时隐藏一个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41212868/