親divのホバーでimg srcを変更するにはどうすればよいですか？

Question

jQueryを使用してdivホバーで画像が変化しない問題があります。画像を除いて他のすべてが変わります。現在のところ、青いイメージは同じままであり、変更されません。私はまた、奇妙な宙に浮かんだとき、緑色のイメージが外れていることに気づきます。私は間違って何をしていますか？ https://jsfiddle.net/8bcfnd6f/

HTML：：

<div id="widget"> 
    <div id="text-button-widget"> 
     <h2>Lorem Ipsum</h2> 
     <img id="widget-img" src="http://www.clipartbest.com/cliparts/di8/KRL/di8KRL8ie.png"/> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
</div> 

CSS：

#widget:hover { 
    cursor: pointer; 
    background-color: #0098db; 
} 

のjQuery：

は、私がここにjsfiddle問題を作成しました0

$('#widget').hover(function(){ // hover in 
    $('#widget h2, #widget p').css('color','#fff'); 
    $('#widget-img').css('background', 'url("http://www.clipartkid.com/images/17/youtube-play-icon-clipart-Ns7Pf4-clipart.gif") no-repeat center center fixed'); 
}, function(){ // hover out 
    $('#text-button-widget h2').css('color','#000'); 
    $('#text-button-widget p').css('color','#000'); 
    $('#widget-img').css('background', 'url("http://www.clipartbest.com/cliparts/di8/KRL/di8KRL8ie.png") no-repeat center center fixed'); 
}); 

Answer 1

は今、あなたはコードSRCを変更しない、それだけで背景を変更し、SRCを提示することを追加します。 あなたはちょうどあなたがこのようなコードを使用する必要があり、SRCを変更する必要がある場合：私は、問題はあなたが画像と画像要素を持っている、とあなたは背景を変更しているので、画像要素がまだ意志だと思う

$('#widget').hover(function(){ // hover in 
    $('#widget h2, #widget p').css('color','#fff'); 
    $('#widget-img').attr("src", "http://www.clipartkid.com/images/17/youtube-play-icon-clipart-Ns7Pf4-clipart.gif"); 
}, function(){ // hover out 
    $('#text-button-widget h2').css('color','#000'); 
    $('#text-button-widget p').css('color','#000'); 
    $('#widget-img').attr("src", "http://www.clipartbest.com/cliparts/di8/KRL/di8KRL8ie.png"); 
}); 

Answer 2

<img>を完全に変更したい場合は、幅と高さを0に設定し、それに応じて埋め込みを追加する必要があります。次に、背景イメージを追加します。

あなたのケースごとにCSSソリューション。 Javascriptは必要ありません。

#widget:hover { 
    cursor: pointer; 
    background-color: #0098db; 
    color: #fff; 
} 
#widget:hover img { 
    height: 0; 
    width: 0; 
    background: url("http://www.clipartkid.com/images/17/youtube-play-icon-clipart-Ns7Pf4-clipart.gif") no-repeat; 
    background-size: 256px 256px; 
    background-position: center center; 
    padding: 128px; 
} 

Answer 3

$('#widget-img').attr('src', 'http://www.clipartkid.com/images/17/youtube-play-icon-clipart-Ns7Pf4-clipart.gif')