CSS3在悬停时显示其他元素

时间:2013-11-21 07:26:31

标签: html css css3 css-transitions css-animations

我正在尝试在悬停锚标记时显示列表项。 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;*/
}

3 个答案:

答案 0 :(得分:3)

尝试使用adjacent siblings selector

.menu a:hover + ul代替.menu a:hover .menu ul

jsFiddle Demo

答案 1 :(得分:0)

您必须使用相邻的兄弟选择器:

.menu > a:hover + ul

此外,您的媒体资源-webkit-transition: visibility 1s, opacity 1s;存在问题,因为这会阻止菜单显示。

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

答案 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;

}