关于悬停能见度不工作

我试图在.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; 
}

来源

2015-05-01 Mithun Raikar

'。用户-options'不是'.box1'的后代，所以'.box .box1：hover.user-options'将不起作用 – wf4

你需要这样的：http://jsfiddle.net/p2y1nLq2/1/？ –

@Amit谢谢很多人... :) –

由于昆汀和WF4提到的，它不可能使用您是否尝试过的方式..

所以你可以尝试这样的：Demo

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

来源

2015-05-01 10:03:22

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

这是一个descendant combinator。用户选项元素不是box1元素的后代，因此选择器不匹配。

他们是兄弟姐妹，请使用sibling combinators之一（如+）代替。

来源

2015-05-01 09:04:28 Quentin

-1

试试这个。

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

来源

2015-05-01 09:19:29

关于悬停能见度不工作

回答

相关问题