jquery - 如何在父 div 悬停时更改 img src？

Question

我在使用 jQuery 将图像悬停在 div 上时遇到问题。除图像外，其他所有内容都会相应更改。目前，蓝色图像保持不变，不会改变。我还注意到，当鼠标悬停时，绿色图像显示错位，这很奇怪。我做错了什么？

我在这里创建了一个 jsfiddle 问题: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:

$('#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，它只是更改 BACKGROUND 并将其添加到 present 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");
});