我正在尝试在悬停锚标记时显示列表项。 How to affect other elements when a div is hovered - 试过使用这篇文章,但我没能成功。
我在这里尝试使用纯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;*/
}
答案 0 :(得分:3)
答案 1 :(得分:0)
您必须使用相邻的兄弟选择器:
.menu > a:hover + ul
此外,您的媒体资源-webkit-transition: visibility 1s, opacity 1s;
存在问题,因为这会阻止菜单显示。
答案 2 :(得分:0)
此处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;
}