在鼠标悬停和鼠标移动上更改图像

Question

我有两个数组,图像列表名称如下

array 1 = ["arrow1.png", "arrow2.png", "arrow3.png", "arrow4.png", "arrow5.png"]

array 2 = ["arrow_over1.png", "arrow_over2.png", "arrow_over3.png", "arrow_over4.png", "arrow_over5.png"]

我希望id="alter_img"在鼠标悬停和鼠标移动时更改div标签中的图像在鼠标悬停时,它应该是"arrow1.png"在mouseleave上它应该是arrow_over1.png

结构是这样的

<div id="alter_img">
  <img src="arrow1.png">
  <img src="arrow2.png">
  <img src="arrow3.png">
  <img src="arrow4.png">
  <img src="arrow5.png">
</div>

我怎么能这样做？

Answer 1

使用data属性:

HTML

<div id="alter_img">
    <img src="arrow1.png" data-hover_src="arrow_over1.png">
    <img src="arrow2.png" data-hover_src="arrow_over2.png">
    <img src="arrow3.png" data-hover_src="arrow_over3.png">
    <img src="arrow4.png" data-hover_src="arrow_over4.png">
    <img src="arrow5.png" data-hover_src="arrow_over5.png">
</div>

jQuery的

$(document).ready(function(){
    $("#alter_img > img").hover(function() {
        $(this).data("orig_src", $(this).attr("src"));
        $(this).attr("src", $(this).data("hover_src"));
    }, function(){
        $(this).attr("src", $(this).data("orig_src"));
    });
});