如何在父 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

如果您完全想要更改 <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 2

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

Answer 3

现在，您的代码不会更改 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");
});

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

How to change an img src on a parent div hover?

html

css

jquery

hover

src