Question

好吧，我完全不知所措。我正在设计一个右上角有4个社交图标的网站。当一个人悬停在图标上时，它们会从.7增加到1.0不透明度，并且下面会出现一行文字。最好通过一个例子证明这一点（图像被破坏，但无论如何）：

这是一个相当简单的效果，我通过使用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中指定的内容。

我做错了什么？

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

中所示

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

1 个答案: