使用CSS3将不透明度应用于嵌套列表项以获得淡入淡出效果 [英] Applying opacity to a nested list item for a fade effect using CSS3

问题描述

好吧，我完全失去了。我在设计一个网站，在右上角有4个社交图标。当将鼠标悬停在图标上时，它们从.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和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中指定的。

我做错了什么？

解决方案

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和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; 
} 
  

添加左侧：-9999px; 似乎修复了这个问题。如果您不想让它在不再悬停时自动返回左侧，您可以调整转换，如此小提琴

Well, I'm completely at a loss. I'm designing a website with 4 social icons on the top right hand side. When one hovers over the icons, they increase from .7 to 1.0 opacity, and a line of text appears underneath. This is best demonstrated by an example (the images are broken, but no matter):

http://jsfiddle.net/7hZYj/

It's a rather simple effect which I've achieved through the use of CSS3 and lists:

#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;
}

The problem is that if one hovers right below the images, the text shows up anyway. For instance, if you hover right below the image furthest to the right, the "join the e-list" line shows up. I only want it to reach 1.0 opacity when the image is hovered over...which is what I thought I specified in the CSS above.

What am I doing wrong?

解决方案

opacity leaves the element there and since it's a child of the li, when you hover over the invisible element, you're hovering over the 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;
}

Adding left:-9999px; seems to fix the issue. You can adjust the transition if you don't want it to automatically go back to the left when you are no longer hovering, as seen in this fiddle

这篇关于使用CSS3将不透明度应用于嵌套列表项以获得淡入淡出效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！