Question

This is my current code and I’ve been trying to work it out for over an hour already:

$('#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)');
    }
});

What it should do is when I hover, the icon changes. But when I clicked, the icon stays on as active until I clicked on another item. There is no problem with the mouseenter/mouseleave. The problem starts with the click. Upon click, it does the job, but upon moving the mouse, the mouseleave function activates. Meaning the icon becomes inactive again.

Answer 1

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)'); 
        }
    } 
});

You just need to keep track of your active item.