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

UserService

Answer 2

现在，您的代码不会更改src，它只是更改BACKGROUND并将其添加到当前的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 3

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

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

3 个答案: