CSS3在悬停时显示其他元素答案

【问题标题】：CSS3 Display other element on hoverCSS3在悬停时显示其他元素
【发布时间】：2013-12-05 13:31:05
【问题描述】：

我在这里尝试在悬停锚标记时显示列表项。 How to affect other elements when a div is hovered - 尝试使用这篇文章但我无法成功。

我在这里只用纯 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;*/
}

【问题讨论】：

标签： html css css-transitions css-animations

【解决方案1】：

尝试使用adjacent siblings selector

.menu a:hover + ul 而不是.menu a:hover .menu ul

jsFiddle Demo

【讨论】：

一旦元素可见，我无法将鼠标移到它上面。由于悬停效果，一旦鼠标离开锚标签，它就会消失。我怎样才能让它把我的鼠标放在上面？
尝试使用.menu:hover a + ul
太棒了！非常感谢。

【解决方案2】：

你必须使用相邻兄弟选择器：

.menu > a:hover + ul

另外，您的属性-webkit-transition: visibility 1s, opacity 1s; 有问题，因为它阻止了菜单出现。

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

【讨论】：

感谢您的回复。 .menu a:hover + ul 这对我有用，甚至过渡也很顺利。

【解决方案3】：

这里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;

}

【讨论】：