handle jQuery hover behavior

Question

I've made a simple example with my problem so I guess it's easier for you to understand. I have a few divs which all have a grey color, but when you hover over one of them, you see they get their true color. If I click one of them (and it alerts clicked) it should change the color and the .hover() shouldn't work anymore on this element, until another one is clicked. I'm sitting here one hour and don't get it to work:

.test { background-color: #ccc;}
<div class="test" id="d1"></div>
<div class="test" id="d2"></div>
<div class="test" id="d3"></div>

and the script:

$(function() {
$('#d1').hover(function() { $(this).css('background-color', '#F00'); }, function() { $(this).css('background-color', '#CCC'); });
$('#d2').hover(function() { $(this).css('background-color', '#F0F'); }, function() { $(this).css('background-color', '#CCC'); });
$('#d3').hover(function() { $(this).css('background-color', '#00F'); }, function() { $(this).css('background-color', '#CCC'); });

$('#d1').click(function() { $(this).css('background-color','#F00'); alert("clicked")});
$('#d2').click(function() { $(this).css('background-color','#F0F'); alert("clicked")});
$('#d3').click(function() { $(this).css('background-color','#00F'); alert("clicked")});

})

for the link click here

It seems that the hover still works and it removes the background color immediately.

Thanks in advance!

Answer 1

Here you go with a really simple solution:

LIVE DEMO

  $('.test').hover(function( e ){
    var hc = $(this).hasClass('test');
    $(this).css({ backgroundColor : (e.type=="mouseleave" && hc) ? '#ccc' :  $(this).data('c') });
  }).click(function(){
    $(this).toggleClass('test test2 ');
  });

having this HTML:

<div class="test" id="d1" data-c="#f00"></div>
<div class="test" id="d2" data-c="#f0f"></div>
<div class="test" id="d3" data-c="#00f"></div>

and both classes in CSS:

.test, .test2{

Answer 2

Well, without too many changes to your code [refactoring]:

$(function() {
    var clickedId = '';

    $('#d1').hover(function() {
        $(this).css('background-color', '#F00'); 
    }, function() { 
        if (this.id != clickedId) {
            $(this).css('background-color', '#CCC');
        }
    });
    $('#d2').hover(function() { 
        $(this).css('background-color', '#F0F'); 
    }, function() { 
        if (this.id != clickedId) {
            $(this).css('background-color', '#CCC');
        }     
    });
    $('#d3').hover(function() { 
        $(this).css('background-color', '#00F');
    }, function() {
        if (this.id != clickedId) {
            $(this).css('background-color', '#CCC');
        }
    });

    $('#d1').click(function() {
        clickedId = this.id;
        $('.test').not(this).css('background-color','#CCC');
        alert("clicked");
    });
    $('#d2').click(function() {
        clickedId = this.id;
        $('.test').not(this).css('background-color','#CCC');
        alert("clicked");
    });
    $('#d3').click(function() {
        clickedId = this.id;
        $('.test').not(this).css('background-color','#CCC');
        alert("clicked");
    });

 })

Changes:

• Use a variable to hold the ID of the last clicked element
• When you click an element, store the id of that clicked element. Also, set all elements (except the one you clicked) back to the original background color.
• On hover out, check if the element losing hover is the id of the last clicked element (if it is, don't change its background back).

As an aside, I would probably use CSS classes and set .active to the clicked elements, and use .test:hover. But I assume this was a rudimentary JavaScript example for learning purposes.

And if you wanted to see the one with CSS: http://jsfiddle.net/MgTr4/1/

Answer 3

HTML

<div class="test" data-selected-item="d1" id="d1"></div>
<div class="test" data-selected-item="d2" id="d2"></div>
<div class="test" data-selected-item="d3" id="d3"></div>

CSS

.test { margin-left: 50px; background-color:#CCC; height: 50px; width: 50px; float: left; margin-top: 50px; }
.d1 { background-color : #F00 !important;}
.d2{ background-color : #F0F !important;}
.d3 { background-color : #00F !important;}

JS

  $(function() {
    $('.test').click(function() {
        $(this).hasClass($(this).data('selected-item')) ? $(this).removeClass($(this).data('selected-item')) : $(this).addClass($(this).data('selected-item'));
    });
});

Sample http://jsfiddle.net/sheeban/gEftm/3/

Answer 4

You can simplify the code greatly by using classes, and the jQuery methods .addClass and .removeClass

Working jsFiddle here

HTML:

<div class="test" id="d1" mycolor='#F00'></div>
<div class="test" id="d2" mycolor='#F0F'></div>
<div class="test" id="d3" mycolor='#00F'></div>

jQuery/javascript:

$('.test').hover(
    function() {
        if ($(this).hasClass('stick') == false) {
            $(this).css('background-color', $(this).attr('mycolor') );
        }
    },function() {
        if ($(this).hasClass('stick') == false) {
            $(this).css('background-color', '#CCC');
        }
});
$('div').click(function() {
    $('div').removeClass('stick');
    $(this).addClass('stick');
});

CSS:

.test { background-color: #ccc;}
div{width:150px;height:80px;margin:5px;}

---

To simplify it even more, you can remove the class="test" from all DIVs, and change the hover selector to:

$('div').hover( etc etc

This will not interfere with detecting the click event on the same collection of selectors.

Answer 5

It's better to use css in this situation. JavaScript solution is more complicated. In your case you can change your "hover" block of code and change it to css rules:

#d1:hover { background-color: #F00; }
#d2:hover { background-color: #F0F; }
#d3:hover { background-color: #00F; }

Here is an example: jsFiddle, after edit: jsFiddle2