Question

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

jsfiddle演示：HERE

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

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

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

3 个答案: