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显示悬停的其他元素

回答

相关问题