2012-05-08 15 views
1

特定のアンカーをホバリングして、内部にスパンを見つけて表示するjQueryスクリプトがあります。私が持っている問題があるアンカー要素でのimgの検索

$('a.class').live('mouseover', function (e) { 
    $(e.srcElement).find('.class2').fadeTo('slow', 1); 
}); 

:テキスト(テキスト)をホバリング時にホバー効果が働く

<a class="class" href="#"> 
    <img src="img.jpg"/> 
    <p>SOME TEXT</p> 
    <span class="class2"> 
    <p>SOME CONTENT</p> 
    </span> 
</a> 

そして、それを表示するためのスクリプトのようなものだ:だからHTML構造は、のようなものがあります画像をホバーするとになりません(img.jpg)。私がこれに欠けている理由はありますか?なぜなら、a.classはアンカー内のすべてを取得する必要がありますが、なぜイメージを取得しないのでしょうか?

答えて

4

srcElementは、イベントオブジェクトがwindowオブジェクトにバインドされたときに、以前のバージョンのInternet Explorerで使用されていたプロパティであるため、読んだところが不思議です。最初にevenを呼び出す要素を取得する場合は、e.targetまたはthisのいずれかを使用する必要があります(thisは、使用される場所によって参照が変更されます)。

$("a.class").on("mouseenter", function(){ 
    $(".class2", this).fadeTo("slow", 1); 
}); 

a要素はブロックレベルの要素ではありません。それは約20pxの高さにすぎません。私はライトグリーンであることをアンカーの背景色を変更した下の画像の中に:「SOME TEXT」と大きなキティのイメージは技術的にアンカー内にネストされている間、あなたが見ることができるように

enter image description here

、彼らはその境界の外に落ちる。私たちはブロックするその表示を設定した場合、我々はこれを変更することができます。それを解決し

enter image description here

+0

a.class { display:block; } 
、感謝ジョナサンを。 – Yisela

+0

簡単な質問:別の要素に同じスクリプトを適用する必要がある場合はどうすればよいですか? "this"は問題を作りますか? – Yisela

+0

@yisela 'this'はイベントを発生させた*要素を指します。だから問題はないはずです。 – Sampson

関連する問題