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

我想在mouseover和mouseleave上用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"));
    });
});

Answer 2

我猜，正如你提到的那样，你实际上想要在mouseenter和mouseout上改变每个图像的src属性。如果是这种情况，请尝试

$("#alter_img > img").hover( function( ) {
    var src = $(this).attr("src");
    $(this).attr( "src", Array1[ Array2.indexOf(src) ] );
},
function( ) {
    var src = $(this).attr("src");
    $(this).attr( "src", Array2[ Array1.indexOf(src) ] );
});

演示here

Answer 3

我得到了最好的答案

$('img').bind('mouseenter mouseleave', function() {
$(this).attr({
    src: $(this).attr('data-other-src') 
    , 'data-other-src': $(this).attr('src') 
})
});

和图片标记

<img data-other-src="arrow_over1.png" src="arrow1.png">

Answer 4

你最好使用CSS。

将每个原始按钮和夸大按钮合并为一个图像，每个状态紧挨着另一个图像。

然后你可以简单地使用css将按钮的可见区域从“正常”移动到“覆盖”而不使用JavaScript：

// button normally. Because we specify a width and height that is all that
// will be shown of our background. e.g. Our "normal state"
a.myButton {
    display:block;
     width:200px;
    height:80px;
    padding:10px;
    cursor:pointer;
    background:url(images/my-button-sprite.png) no-repeat top left;
 }

// This will switch the button to our right side (or our "over state")
a:hover.myButton  {
    background:url(images/my-button-sprite.png) no-repeat top right;
}

或者如果你真的想按照自己的方式去做：



$('#alter_img > img').mouseover(function(){
    var idIndex = array1.indexOf($(this).attr('src'));
    if(idIndex != -1)
        $(this).attr('src', array2[idIndex]);

}).mouseleave(function(){

    var idIndex = array2.indexOf($(this).attr('src'));
    if(idIndex != -1)
        $(this).attr('src', array1[idIndex]);
});

$('#alter_img > img').mouseover(function(){ var idIndex = array1.indexOf($(this).attr('src')); if(idIndex != -1) $(this).attr('src', array2[idIndex]); }).mouseleave(function(){ var idIndex = array2.indexOf($(this).attr('src')); if(idIndex != -1) $(this).attr('src', array1[idIndex]); });

Answer 5

使用

   onmouseover=document.getElementById("alter_img").src="arrow1.png"          
   onmouseout=document.getElementById("alter_img").src="arrow_over1.png"

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

5 个答案:

使用`data`属性：

HTML

的jQuery

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

5 个答案:

使用data属性：

HTML

的jQuery

使用`data`属性：