jQuery mouseenter toggle

时间:2013-04-01 10:00:52

标签: jquery

我有三个'标签',我使用的图像如下: -

enter image description here

每个标签有三张图片: -

  • bookaccount.png(默认 - 橙色)
  • bookaccount-a.png(活跃 - 白色)
  • bookaccount-h.png(悬停 - 蓝色)

与bookcash.png和bookguest.png相同。

默认情况下,我希望'Guest'保留为活动标签,其他标签保留为橙色,这就是我所拥有的:

<div id="main-online-user">

    <a href="javascript:void(0)" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login-guest.php')"><img alt="One 2 One Guest" id="img-onlinebooking-guest" class="left" src="images/bookguest-a.png" /></a>

    <a href="javascript:void(0)" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login.php')"><img alt="One 2 One Account" id="img-onlinebooking-acc" class="left" src="images/bookaccount.png" /></a>

    <a href="javascript:void(0)" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login-guest.php')"><img alt="One 2 One Cash" id="img-onlinebooking-cash" class="left" src="images/bookcash.png" /></a>

</div>

对于悬停事件,我现在这样做: -

    $("#img-onlinebooking-guest").hover(function() { 
         $(this).attr("src", "images/bookguest-h.png");
    });

    $("#img-onlinebooking-guest").mouseleave(function() { 
         $(this).attr("src", "images/bookguest.png");
    });

问题在于(比如Guest是活动的 - 白色),我将鼠标悬停在它上面,当我离开该元素时,当它仍然是活动标签时,它会将图像更改回橙色(默认)。

我希望能够做到的是: -

如果图像是活动元素,当您将鼠标悬停在图像上时,没有任何反应。 (这可能是更好的选择)

或者,如果活动元素悬停,则在mouseout上它将恢复为mouseenter事件之前的颜色。

我不知道如何做到这一点,所以我将不胜感激任何帮助!

(我知道我可以使用jQuery选项卡,但客户端想要这些图像,所以我没有选择)

修改::

我已将'active'类添加到#img-onlinebooking-guest并将jQuery更改为: -

    $("#img-onlinebooking-guest").click(function() { 

         $(this).addClass('active');
         $('#img-onlinebooking-cash, #img-onlinebooking-acc').removeClass('active');
         $(this).attr("src", "images/bookguest-a.png");
         $('#img-onlinebooking-acc').attr("src", "images/bookaccount.png");
         $('#img-onlinebooking-cash').attr("src", "images/bookcash.png");

    });

    $("#img-onlinebooking-acc").click(function() { 

         $(this).addClass('active');
         $('#img-onlinebooking-guest, #img-onlinebooking-cash').removeClass('active');
         $(this).attr("src", "images/bookaccount-a.png");
         $('#img-onlinebooking-guest').attr("src", "images/bookguest.png");
         $('#img-onlinebooking-cash').attr("src", "images/bookcash.png");

    });

    $("#img-onlinebooking-cash").click(function() { 
         $(this).addClass('active');
         $('#img-onlinebooking-guest, #img-onlinebooking-acc').removeClass('active');
         $(this).attr("src", "images/bookcash-a.png");
         $('#img-onlinebooking-guest').attr("src", "images/bookguest.png");
         $('#img-onlinebooking-acc').attr("src", "images/bookaccount.png");

    });

    $('#img-onlinebooking-guest:not(.active)').hover(

        function () {
            $(this).attr("src", "images/bookguest-h.png");
        },

        function () {
            $(this).attr("src", "images/bookguest.png");

    });

    $('#img-onlinebooking-acc:not(.active)').hover(

        function () {
            $(this).attr("src", "images/bookaccount-h.png");
        },

        function () {
            $(this).attr("src", "images/bookaccount.png");

    });

    $('#img-onlinebooking-cash:not(.active)').hover(

        function () {
            $(this).attr("src", "images/bookcash-h.png");
        },

        function () {
            $(this).attr("src", "images/bookcash.png");

    });

看起来很乱,但无论如何,它正在为“访客”标签工作,我在HTML中添加了“活动”类,但是对于其他标签不能正常工作。如果我单击“现金”,它会使图像处于活动状态(白色),但在鼠标输出时它仍然会将颜色恢复为橙色(默认),因为我已经将颜色“活动”添加到此元素上。 / p>

有什么想法吗?

你可以在这里看到; Link

3 个答案:

答案 0 :(得分:2)

你可以这样做:

点击图片后,设置一个名为active

的课程
$("#img-onlinebooking-guest").click(function () {
    $(this).addClass('active');
});

然后如果它不是活动链接,我们可以做悬停逻辑

$('#img-onlinebooking-guest:not(.active)').hover(

function () {
    $(this).attr("src", "images/bookguest-h.png");
},

function () {
    $(this).attr("src", "images/bookguest.png");
});

答案 1 :(得分:0)

我建议您在点击时为.active这样的图片添加新的类名。

然后您可以将此脚本与.not() or :not()

一起使用
$('[id^="img-onlinebooking"]').not('.active').hover(function() { 
     $(this).attr("src", "images/bookguest-h.png");
});

$('[id^="img-onlinebooking"]').not('.active').mouseleave(function() { 
     $(this).attr("src", "images/bookguest.png");
});

答案 2 :(得分:0)

这是因为在更改hover()mouseleave()事件处理程序中的标签图像之前,您没有设置/检查任何标记。你可以这样做

$("#img-onlinebooking-guest").hover(function() {
         var pathname = window.location.pathname;
         if(pathname.indexOf("/login-guest.php")<0)
         {
           //guest is not active
           $(this).attr("src", "images/bookguest-h.png");
         }
    });

    $("#img-onlinebooking-guest").mouseleave(function() {
         var pathname = window.location.pathname;
         if(pathname.indexOf("/login-guest.php")<0)
         { 
           //guest is not active
           $(this).attr("src", "images/bookguest.png");
         }
    });