悬停时，可见性不起作用

我正在尝试将鼠标悬停在.box1上时显示div .user-options。但是当我将鼠标悬停在.box1上时，.user-options是不可见的。可能是什么原因？

.html：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="user-settings.css" type="text/css">
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="user-options">
<ul class="settings">
    <li><a href="#">Profile</a></li>
    <li><a href="#">blah blah</a></li>
    <li><a href="#">Customization</a></li>
    <li><a href="#">Logout</a></li>
</ul>
</div>
</div>
</body>
</html>

.css：

 .box1{
    width:50px;
    height:50px;
    background:orange;
}
.user-options{
    background:orange;
    visibility:hidden;
    width:200px;
}
.settings{
    list-style:none;
    padding:0px;
}
.box .box1:hover .user-options{
    visibility:visible;
}
.settings a{
    text-decoration:none;
}

.box .box1:hover .user-options
                ^
                ^

这是一个后代组合器。user-options 元素不是 box1 元素的后代，因此选择器不匹配。

他们是兄弟姐妹，请改用其中一个同级组合器（如+）。

正如昆汀和wf4所提到的，不可能使用你尝试的方式。

所以你可以这样尝试：演示

.box {
    width:50px;
    height:50px;
    background:orange;
}
.box > .user-options {
    background:orange;
    width:200px;
    display:none;   
   position: relative;
}
.settings {
    list-style:none;
    padding:0px;
}
.settings a {
    text-decoration:none;
}
.box:hover > .user-options {
    display:block;
     position:absolute;
    top:50px;
    left:0;
}

试试这个。

.box > .box1:hover + .user-options {...}

相关内容

最新更新

热门标签：