<a>の中でh1をターゲットに設定するにはどうすればよいですか？

Question

私は、ホバートしたときにdivが背景を変更したいと思っています。しかし、divの中のテキストが代わりにホバーされているときには、背景が変わらない。 これは私が試みたものですが、すべての背景はdivです。私はまた、imgの代わりにa > imgをハンドラの関数で試しましたが、全く機能しませんでした。

function handlerIn() { 
    $("img").css({"opacity":1}); 
} 

function handlerOut() { 
    $("img").css({"opacity":0}); 
} 

$("a").mouseenter(handlerIn).mouseleave(handlerOut); 

Answer 1

a > imgimgはa（parent > child）の子が、子孫（achestor descendant）ではありませんので動作しません。

だからあなたのCSSルールは次のようになります。

a:hover img { 
    opacity: 1; 
} 

ですから、まったくのjQueryを必要としませんが、あなたはjQueryのを使用したい場合、あなたはイベントのように起こるa要素を使用する必要がありますルートはimg要素のために検索します。さもなければ、すべてimg要素を見つけるでしょう。

function handlerIn() { 
    $(this).find('img').css({ 
    "opacity": 1 
    }); 
} 

function handlerOut() { 
    $(this).find('img').css({ 
    "opacity": 0 
    }); 
} 

$("a").mouseenter(handlerIn).mouseleave(handlerOut); 

Answer 2

jqueryを実行する必要はありません。これは、CSSで行うことができます

：

#kpop:hover, #fashion:hover, #martialarts:hover, #nature:hover{ 
    background: url('http://www.dike.lib.ia.us/images/sample-1.jpg/image_preview'); 
} 

Answer 3

イムいないことを確認これが正しいあなたがhover()機能を使用していない理由は？ http://codepen.io/soulister/pen/MyZrPy