-5

我有两个数组，其中包含这样的图像名称列表

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"鼠标悬停和mouseleave更改div标签中的图像在mouseover上应该是"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>

我怎么能那样做？

4

5 回答 5

8

使用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"));
    });
});
于 2012-11-23T10:50:42.153 回答
1

我猜，当您提到您实际上想要更改 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) ] );
});

演示在这里

于 2012-11-23T10:56:56.600 回答
1

我有最好的答案

$('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">
于 2012-11-23T10:57:32.807 回答
0

使用 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]);
});

于 2012-11-23T10:53:37.240 回答
-1

采用

   onmouseover=document.getElementById("alter_img").src="arrow1.png"          
   onmouseout=document.getElementById("alter_img").src="arrow_over1.png"
于 2012-11-23T10:52:29.153 回答