在悬停另一个div

时间：2016-12-18 21:04:39

标签： javascript jquery html css css3

我正在创建侧边栏导航。当侧边栏（.nav-sidebar）在悬停时展开时，我希望圆圈（.circle-indicator）消失。这可以用CSS完成还是我需要使用javascript？我该怎么做？

这是页面的代码

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

使用

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

此规则将执行此操作

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

或过渡

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

示例代码段

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

LGSon和Brad的答案很好，但我会用opacity和transition来做。您无法转换dispay: none

＆＃13;
＆＃13; 
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;
	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 {
	opacity: 0;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您可以使用以下样式创建此效果

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题