html - 使用 CSS3 将不透明度应用于嵌套列表项以获得淡入淡出效果

Question

嗯，我完全不知所措。我正在设计一个右上角有 4 个社交图​​标的网站。当将鼠标悬停在图标上时，它们的不透明度会从 0.7 增加到 1.0，并且下方会出现一行文本。最好通过一个示例来证明这一点(图像已损坏，但没关系):

http://jsfiddle.net/7hZYj/

这是我通过使用 CSS3 和列表实现的一个相当简单的效果:

#pageHeader .social ul ul {
    position: absolute;
    top: 30px;
    right:0;
    width:160px;
    text-align: right;
    opacity: 0.0;
    -moz-transition:ease .6s; /* Firefox 4 */
    -webkit-transition:ease .6s; /* Safari and Chrome */
    -o-transition:ease .6s; /* Opera */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
}

#pageHeader .social ul li:hover ul {
        opacity: 1.0;
}

问题是，如果将鼠标悬停在图像的正下方，文本无论如何都会显示。例如，如果您将鼠标悬停在最右侧图像的正下方，则会显示“加入电子列表”行。我只希望它在 image 悬停时达到 1.0 不透明度...这就是我认为我在上面的 CSS 中指定的内容。

我做错了什么？

Answer 1

opacity 将元素留在那里，因为它是 li 的子元素，当您将鼠标悬停在不可见元素上时，您将鼠标悬停在 li.

#pageHeader .social ul ul {
    position: absolute;
    top: 30px;
    right:0;
    width:160px;
    text-align: right;
    opacity: 0.0;
    -moz-transition:ease .6s; /* Firefox 4 */
    -webkit-transition:ease .6s; /* Safari and Chrome */
    -o-transition:ease .6s; /* Opera */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    left: -9999px;
}

#pageHeader .social ul li:hover ul {
    opacity: 1.0;
    left: auto;
}

添加 left:-9999px; 似乎解决了这个问题。如果您不希望它在您不再悬停时自动返回左侧，则可以调整过渡，如本 fiddle 所示。