Jquery Mouseenter/Mouseleave 图像交换答案

【问题标题】：Jquery Mouseenter/Mouse Leave image swapJquery Mouseenter/Mouseleave 图像交换
【发布时间】：2010-11-26 16:07:34
【问题描述】：

所以我写了一小段代码来尝试一些新的方法来进行图像交换以进行预加载，但我遇到了一些麻烦。

我的问题是我有一个包含一些填充和文本的图像的容器，但是我的翻转激活仅在有人翻转图像而不是容器时发生。我一定有一些小错误，希望有人能帮助我。还在学习！

这里是html：

<div class="projectThumb">
    <img src="/img/aeffect_button_static.gif" width="146" height="199" class="static" name="aeffect" alt="" />        
    <img src="/img/aeffect_button_rollover.jpg" width="146" height="199" class="rollover" name="aeffect" alt="" />
    <p class="title">A.EFFECT: Film Poster</p>
</div>

这里是 jquery：

$(document).ready(function(){
    $(".rollover").hide();
$(".projectThumb").mouseenter(
        function(){
            $(this).attr(".static").hide();
        }, 
        function(){
            $(this).attr(".rollover").show();
        });
$(".projectThumb").mouseleave(
        function(){
            $(this).attr(".rollover").hide();
        },
        function(){
            $(this).attr(".static").show();
        });
});

【问题讨论】：

标签： jquery image swap rollover

【解决方案1】：

我想你在找hover:

$(document).ready(function(){
    $(".rollover").hide();
    $(".projectThumb").hover(
    function(){
        $(this).find(".static,.rollover").toggle();
    }, 
    function(){
        $(this).find(".static,.rollover").toggle();
    });
});

mouseenter 和 mouseleave 都只接受一个参数，但是你定义了两个回调函数。

【讨论】：

【解决方案2】：

为什么不试试：

$(".projectThumb").bind("mouseenter mouseleave", function(e) {
    $(this).toggle();
});

【讨论】：