Jquery hoverのフェードサムネイル

Question

jqueryのスタイリングされたホバーフェードイン/アウトサムネイルを作成しようとしています。私はイメージ上でホバリングをしてしまいましたが、問題はありません。ユーザーがカーソルを置くと、私はCSSで達成したテキストを表示したい、という問題は、ユーザーがテキストの上にテキストを置くと、画像がフェードインして戻ってくるときです。テキストの上を浮遊しながら消えています。テキストがぼやけてしまわないようにするために、私はスクリプトセクションの親指クラスに単に切り替えようとしました。

<script> 
$(document).ready(function(){ 
    $(".thumb img").fadeTo("fast", 1.0); // This sets the opacity of the thumbs to fade down to 60% when the page loads 

    $(".thumb img").hover(function(){ 
     $(this).fadeTo("fast", 0.3); // This should set the opacity to 100% on hover 
    },function(){ 
     $(this).fadeTo("fast", 1.0); // This should set the opacity back to 60% on mouseout 
    }); 


}); 
</script> 

HTML

<div class="thumb"> 
<a href="#"><img src="images/hooty_thumb.png" width="250" height="224"/></a> 
<div class="title"> 
<h1 class="din"><a href="#">TITLE HERE</a></h1> 
<h2><a href="#">Branding, Print, Web</a></h2> 
<h2><a href="#">2011</a></h2></div></div> 

CSS：

.thumb {float: left; background-color: #FFF; z-index: 1; width: 250px; height: 225px; margin-right: 27px; margin-bottom: 45px; display: inline-block; *display:inline; *zoom: 1; position: relative;} 
.thumb .title{position:absolute; width: 250px; top: 40%; left:0%; text-align: center; display: none; z-index: -1;} 
.thumb:hover .title{display: inline; z-index: 1;} 
.thumb .title h1{color:#00F;} 

Answer 1

、あなたは画像にDOMを横断し、その後1つ上のレベルに行くと親にロールオーバーイベントを添付するのに必要とその不透明度を設定します。 *サイドノート$（ドキュメント）.ready（関数は、（）{}）と同じHTMLとCSSで$（関数（）{}）

$(function(){ 
    $(".thumb img").fadeTo("fast", 1.0); 

    $(".thumb").bind({ 
     mouseenter:function(){ 
      $('img', this).fadeTo("fast", 0.3); 
     },mouseleave: function(){ 
      $('img', this).fadeTo("fast", 1.0); 
     } 
    }); 
}); 

Answer 2

あなたは、あなたのページをより効率的になり、唯一のHTMLとCSSでこれをacheiveすることができます。あなたが行くここ

のHTML5

<a href="#" class="thumb"> 
    <img src="images/hooty_thumb.png" width="250" height="224"/> 
    <strong>TITLE HERE</strong> 
    <em>Branding, Print, Web</em> 
    <time>2011</time> 
</a> 

CSS

a.thumb{float:left; position:relative; background:#FFF; z-index:1; width:250px; height:225px; text-decoration:none; margin:0 27px 45px;} 
a.thumb img{opacity:0.6; -webkit-transition:opacity 0.2s linear; -moz-transition:opacity 0.2s linear;} 
a.thumb:hover img{opacity:1;} 
a.thumb>strong, .thumb>em, .thumb>time{opacity:0; -webkit-transition:opacity 0.2s linear; -moz-transition:opacity 0.2s linear;} 
a.thumb:hover>strong, .thumb:hover>em, .thumb:hover>time{opacity:1;} 

Answer 3

と同じであり、私はあなたにthumb imgからthumbにイベントバインドを調整イベントが画像ブロック全体で確実に発生するようにします。イベントコールバックでは、jQuery context selectorを使用してimg要素を検出し、フェードイン/フェードアウト効果を実行しました。

効果はここで確認できます。 http://jsfiddle.net/yangchenyun/5pnQA/

$(document).ready(function() { 
    $(".thumb img").fadeTo("fast", 1.0); // This sets the opacity of the thumbs to fade down to 60% when the page loads 
    $(".thumb").hover(function() { 
     $('img', this).fadeTo("fast", 0.3); // This should set the opacity to 100% on hover 
    }, function() { 
     $('img', this).fadeTo("fast", 1.0); // This should set the opacity back to 60% on mouseout 
    }); 
});