關於懸停能見度不工作

我試圖在.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

關於懸停能見度不工作

回答

相關問題