jquery - jquery css缩放图标到不透明的图像

Question

我喜欢阅读有关使用 jquery 和 css在图像中添加缩放图标的文章。我在悬停图像中hover添加 css 。opacity这在我hover图像（图像上的鼠标光标）时有效，但是当我在缩放图标上鼠标光标时，图像上隐藏了 css 不透明度。在所有悬停（图像+缩放图标）中解决不透明图像的任何方法。谢谢

jsfiddle 中的演示：这里

Answer 1

您需要在悬停 时设置不透明度，而a不是img.

#gallery2 a:hover img{
    opacity:0.6;
    filter:alpha(opacity=60);
}

它的工作示例：http: //jsfiddle.net/skip405/X7N33/1/

Answer 2

您必须将元素:hover从img元素移动到a元素。这是一个工作演示http://jsfiddle.net/pomeh/3mSLs/3/。顺便说一句，您不需要 Javascript 来显示/隐藏图标 :)

HTML 代码

<div id="gallery2">   
    <a href="http://www.imagehost.co.za/thumb-CF6F_4F945924.jpg">  
        <img src="http://www.imagehost.co.za/thumb-CF6F_4F945924.jpg" />
        <span></span>
    </a>
</div>​

CSS 代码

#gallery2 a span {
    background-image:url(http://www.jankoatwarpspeed.com/examples/zoom_icon/zoom.png);
    background-repeat:no-repeat;
    width:48px;
    height:48px;
    position:absolute;
    left:15px;
    top:15px;
    opacity: 0;
    filter:alpha(opacity=0);
    -webkit-transition: opacity 0.6s linear;  /* Saf3.2+, Chrome */
       -moz-transition: opacity 0.6s linear;  /* FF4+ */
        -ms-transition: opacity 0.6s linear;  /* IE10 */
         -o-transition: opacity 0.6s linear;  /* Opera 10.5+ */
            transition: opacity 0.6s linear;
}

#gallery2 img {
    border: solid 1px #999;
    padding:5px;
}

/* when you hover the A element, fade the image */
#gallery2 a:hover img {
    opacity:0.6;
    filter:alpha(opacity=60);
}

/* no need for Javascript to show the span element */
#gallery2 a:hover span {
    -webkit-transition: opacity 0.6s linear;  /* Saf3.2+, Chrome */
       -moz-transition: opacity 0.6s linear;  /* FF4+ */
        -ms-transition: opacity 0.6s linear;  /* IE10 */
         -o-transition: opacity 0.6s linear;  /* Opera 10.5+ */
            transition: opacity 0.6s linear;
    opacity: 1;
    filter:alpha(opacity=100);
}

Answer 3

这是因为您将鼠标悬停在图标而不是图像上。如果您也将悬停事件添加到图标，那么当您将鼠标悬停在图标上时，图像不透明度会发生变化，您应该没问题。