我在这里试图在悬停锚标记时显示一个列表项当div悬停时如何影响其他元素-尝试过使用这篇文章,但没有成功。
我在这里尝试使用纯CSS。
这是FIDDLE。
下面是代码。
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;*/
}
尝试使用相邻同级选择器
.menu a:hover + ul
而不是.menu a:hover .menu ul
jsFiddle演示
您必须使用相邻同级选择器:
.menu > a:hover + ul
此外,属性-webkit-transition: visibility 1s, opacity 1s;
也有问题,因为它阻止了菜单的显示。
http://jsfiddle.net/KA5Tg/4/
这是更新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;
}