javascript - JS : Change image name on hover

Question

我试图在鼠标悬停时将“_hover.jpg”添加到我的图像中，但我很挣扎!非常感谢任何帮助。

<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

$(".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"));
});

<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>