我正在创建侧边栏导航。我希望当边栏(.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/

10-12 00:19
查看更多