1

好吧，我完全不知所措。我正在设计一个网站，右上角有 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;
}

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

我究竟做错了什么？

4

1 回答 1

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;似乎可以解决问题。如果您不希望它在不再悬停时自动回到左侧，您可以调整过渡，如this fiddle所示

于 2013-07-12T03:55:43.220 回答