CSS3顯示懸停的其他元素

我在這裏試圖顯示懸停錨標籤的列表項。 How to affect other elements when a div is hovered - 嘗試使用這篇文章，但我無法成功。CSS3顯示懸停的其他元素

我在這裏只用純CSS進行測試。

以下是代碼。

HTML：

<div class="container"> 
    <div class="menu"> 
     <a class="user" href="#">Brett</a> 
     <ul> 
      <li> 
       <a href="#">Settings</a> 
      </li> 
      <li> 
       <a href="#">Logout</a> 
      </li> 
     </ul> 
    </div> 
</div>

CSS：

body { 
    font-size: 50px; 
} 
.container { 
    margin-top: 100px; 
    margin-left: 200px; 
} 
a { 
    text-decoration: none; 
    /*color: #fff;*/ 
} 
.user { 
    position: relative; 
    z-index: 1000; 
    margin-left: -200px; 
} 
ul { 
    list-style: none; 
    position: absolute; 
    top: 2%; 
    left: 11%; 
    visibility: hidden; 
    opacity: 0; 
} 
.menu a:hover .menu ul { 
    visibility: visible; 
    opacity: 1; 
    -webkit-transition: visibility 1s, opacity 1s; 
    /*color: #000;*/ 
    /*-webkit-transition: color 1s;*/ 
}

來源

2013-11-21 Unknown User

嘗試使用，而不是adjacent siblings selector

.menu a:hover + ul.menu a:hover .menu ul

jsFiddle Demo

來源

2013-11-21 07:29:40 Itay

爲我工作。非常感謝。 –

一旦元素可見，我不能將鼠標移動到它。由於懸停效應，鼠標一旦離開錨標籤，它就會消失。我怎樣才能讓它放在我的鼠標呢？ –

嘗試使用'.menu：hover a + ul' – Itay

你必須使用相鄰的兄弟姐妹選擇：

.menu > a:hover + ul

此外，還有一些問題與您的財產-webkit-transition: visibility 1s, opacity 1s;，因爲它是防止菜單出現。

http://jsfiddle.net/KA5Tg/4/

來源

2013-11-21 07:31:15 Ming

感謝您的回覆。 '.menu a：hover + ul'這個工作對我來說甚至是過渡都很順利。 –

這裏is update fiddle，位置沒有菜單，但其上懸停的工作是正確的。

我已經更新CSS爲：

ul { 
    list-style: none; 
    position: absolute; 
    top: 2%; 
    left: 11%; 
    display :none; 
} 
.menu a:hover + ul { 
    display :block !important; 
    opacity: 1; 
    -webkit-transition: visibility 1s, opacity 1s; 

}

來源

2013-11-21 07:36:20

CSS3顯示懸停的其他元素

回答

相關問題