Question

我试图在.user-options上悬停时显示div .box1。但当我鼠标悬停.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;
}

Answer 1

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

那是descendant combinator。 user-options元素不是box1元素的后代，因此选择器不匹配。

他们是兄弟姐妹，请使用其中一个sibling combinators（例如+）。

Answer 2

正如Quentin和wf4所说，它不可能以你试过的方式使用..

所以你可以尝试这样： https://drive.google.com/file/d/0B7TH7VeIpgSQa293YmhSY1M2Um8/view?usp=sharing

.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;
}

Answer 3

试试这个。

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

在悬停可见性不起作用

3 个答案: