Question

所以我有一个小的javascript代码，在悬停缩略图时交换我的主图像，效果非常好！他们是一种在徘徊时回归主要的方式我确信有一点if声明但是我无法理解它！

<div class="product"><img id="main" src="mainImage.jpg" width="550"/></div>
<div class="products">
 <img src="img.jpg" width="200"/>
 <img src="img1.jpg" width="200"/>
 <img src="img2.jpg" width="200"/>
</div>

和javascript是

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
$('.products img').mouseover(function() {
    var url = $(this).attr('src');
    $('#main').attr('src', url);
});
});
</script>

Answer 1

<script type="text/javascript">
     $(document).ready(function(){
    var def_url =  $('#main').attr('src');
    $('.products img').hover(function() {
        var url = $(this).attr('src');
        $('#main').attr('src', url);
    }, function() {
       $('#main').attr('src', def_url);
    });
});
</script>

Answer 2

试试这个......

$('.products img').mouseover(function() {
//do some action...
},function (){
//undo the action..
});

Answer 3

当您将鼠标移出鼠标时，可以使用hover().来实现此目的，它会恢复原始状态并且悬停会为您提供所需的功能。

所以，它是两个函数的组合mouserover（）和mouseout（）

希望这会有所帮助..

Answer 4

您可以通过两种方式制作：

1）使用jQuery hover hover documentation

$(selector).hover(
    function(){ alert("Hover in"); },
    function(){ alert("Hover out); }
 );

2）将<div>与背景图片一起使用，并在悬停时使用css

进行更改

#selector{
    background: url('image1.png');
}

#selector:hover{
    background: url('image2.png');
}

返回主图像

4 个答案: