在更改div背景中结合mouseenter,mouseleave和click事件

时间:2012-07-24 08:24:46

标签: javascript jquery

这是我目前的代码,我已经尝试了一个多小时了:

$('#menu_list').bind('mouseenter mouseleave click', function(event){
    if(event.type == 'click') {
        $('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_active.png)');
        $('#add_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/add_inactive.png)');
        $('#search_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/search_inactive.png)');
        $('#list_text').css('color', 'black');
        $('#add_text').css('color', '#C0C0C0');
        $('#search_text').css('color', '#C0C0C0');
    } else if(event.type == 'mouseenter') {
        $('#list_text').css('color', 'black');
        $('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_active.png)');
    } else if(event.type == 'mouseleave') {
        $('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_inactive.png)');
    }
});

它应该做的是当我悬停时,图标会发生变化。但是当我点击时,图标会一直处于活动状态,直到我点击另一个项目为止。 mouseenter / mouseleave没有问题。问题始于点击。点击后,它完成工作,但在移动鼠标时,鼠标离开功能激活。意味着图标再次变为非活动状态。

4 个答案:

答案 0 :(得分:1)

首先,你为什么要在jQuery中这么复杂?为什么不使用基于css类的系统。

让你的css像这样(显然可以根据需要更改;)

.normal { color:#000; background-image: url(foo.jpg) }
.click { color:#2B2B2B; background-image: url(foo.jpg) }
.mouseIn { color:#F00; background-image: url(foo.jpg) }
.mouseOut { color:#FFF; background-image: url(foo.jpg) }

然后使用jQuery

$('#menu_list').click(function() {

   $('#list_img').addClass("click");
   $('#add_text').addClass("example");
});

$('#menu_list').mouseenter(function() {

   $('#list_img').addClass("mouseIn");

});

$('#menu_list').mouseleave(function() {

   $('#list_img').addClass("mouseOut");

});

我知道你还需要删除类吗?您可以使用名为addClass的{​​{1}}的反面。您可以将它们放在上面显示的函数中

答案 1 :(得分:1)

首先,我建议你为了可分离这些事件而编写3个独立的事件处理程序。

其次,list_clicked是什么?变量似乎超出了范围,因此未定义并始终为真。检查元素上的类,这更容易......

第三:将所有这些样式放入一些css类(例如我的例子中的activeclicked),这使得整个事情变得非常简单。 这样的事情应该有效:

$('#menu_list').click(function() {
   /* alternate the classes by clicking - the class "clicked" is there to indicate 
     that it has been activated by click and won't be removed by mouseout*/
   $(this).toggleClass("active clicked");
});

$('#menu_list').mouseenter(function() {
   /* Just add the "active" class */
   $(this).addClass("active");
});

$('#menu_list').mouseleave(function() {
   /* If the element has not been clicked...*/
   if (!$(this).hasClass("clicked")){
      /*...remove the "active" class */
      $(this).removeClass("active");
   }
});

CSS-classes看起来像这样:

.active #list_img{
    background-image:url(<?=base_url()?>/assets/css/images/list_active.png);
}
.active #list_text{
    color:black;
}

答案 2 :(得分:0)

对于初学者来说,你正在检查变量list_clicked,它似乎没有在你的点击处理程序中设置 - 这意味着!list_clicked将始终返回true ...所以这可能没有帮助。

答案 3 :(得分:0)

var activeItem;
$('#menu_list').bind('mouseenter mouseleave click', function(event){ 
    if(event.type == 'click') { 
        $('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_active.png)'); 
        $('#add_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/add_inactive.png)'); 
        $('#search_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/search_inactive.png)'); 
        $('#list_text').css('color', 'black'); 
        $('#add_text').css('color', '#C0C0C0'); 
        $('#search_text').css('color', '#C0C0C0');
        activeItem = this;          
    } else if(event.type == 'mouseenter') { 
        $('#list_text').css('color', 'black'); 
        $('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_active.png)'); 
    } else if(event.type == 'mouseleave' && !list_clicked) {
        if(activeItem != this) {        
            $('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_inactive.png)'); 
        }
    } 
});

您只需要跟踪活动项目。