jquery - jquerycssズームアイコンを不透明な画像に

Question

jqueryとcssを使用して画像にズームアイコンを追加するために、 Hereの記事を読むのが好きです。ホバー画像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

これは、画像ではなくアイコンにカーソルを合わせているためです。アイコンにもホバーイベントを追加すると、アイコンにカーソルを合わせると画像の不透明度が変化します。