Question

我想添加＆＃39; _hover.jpg＆＃39;鼠标悬停在我的图像上，但我正在挣扎！任何帮助非常感谢。

<script type="text/javascript">
$(document).ready(function () {


$(".img").mouseover(function (e) {    
$(this).attr("src", $(this).attr("src").replace(".jpg", "_hover.jpg"));
}).mouseout(function (e) {
$(this).attr("src", $(this).attr("src").replace("._hover.jpg", ".jpg"));
});

)}

<li class="hex">
<div class="hexIn">
<img src="/images/leaderboard.jpg" alt="" class="hex-img"/>
  <h2>Joe Bloggs<br>from ACME<br>volunteered at<br>Inspire<br>on 3 July</h2>
</div></li>

非常感谢

Answer 1

<style>
.hex-img:hover {
background-image: url('_hover.jpg');
}

.hex-img {
background-image: url('original.jpg');
}
</style>

Answer 2

选择器错误，img而非.img。它代表了班级名称。但是你的班级名称是hex-img。document.ready没有正常关闭。关闭是错误的。它是})而不是)}

＆＃13;

$(document).ready(function() {
      $("img").mouseover(function(e) {
        $(this).attr("src", $(this).attr("src").replace(".jpg", "_hover.jpg"));
        console.log($(this).attr("src"))
      }).mouseout(function(e) {
        $(this).attr("src", $(this).attr("src").replace("._hover.jpg", ".jpg"));
        console.log($(this).attr("src"))
      });
    })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="hex">
  <div class="hexIn">
    <img src="/images/leaderboard.jpg" alt="" class="hex-img" />
    <h2>Joe Bloggs<br>from ACME<br>volunteered at<br>Inspire<br>on 3 July</h2>
  </div>
</li>

＆＃13;

Answer 3

＆＃13;

$(".hex-img").mouseover(function () {    
$(this).attr("src", $(this).attr("src").replace(".jpg", "_hover.jpg"));
$(".test").text($(this).attr("src"));
}).mouseout(function () {
$(this).attr("src", $(this).attr("src").replace("_hover.jpg", ".jpg"));
$(".test").text($(this).attr("src"));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="test">Hello</p>
<li class="hex">
<div class="hexIn">
<img src="abc.jpg" class="hex-img" width="100px" height="100px"/>
  <h2>Joe Bloggs<br>from ACME<br>volunteered at<br>Inspire<br>on 3 July</h2>
</div></li>

＆＃13;

Answer 4

当你调用默认的html标签时，你不需要添加.或# ..但这不是一种专业方式..总是基于id或{{1改变这一行......

class

JS：在悬停时更改图像名称

4 个答案: