Jquery mouseover change background color

Jquery code:

$(".menu_clickable").mouseover(function() {
    $(this).css({'background-color' : '#F00'}).mouseout(function(){
        $(this).css({'background-color' : '#FFF'});
    });
});


$(".menu_clickable")开发者_StackOverflow中文版.live('click', function() {
    $(this).css({'background-color' : '#FCC'});
});

HTML source:

<div class="menu_clickable prof_info2" id="prof_info" >first</div>
<div class="menu_clickable prof_info3" id="prof_info" >second</div>
<div class="menu_clickable prof_info3" id="prof_info" >third</div>

I'm trying to make the hover efect using Jquery and it is working fine but if I want to change the DIV background color when it's clicked it's not working, actually the clicked DIV change background color but it is stay like that while the cursor is on it. If I move it out it will restore the original background color. Why?

---

First, you're really not using mouseout correctly. The way you have it, whenever you mouseover the element, your are assigning the mouseout event handler.

Second, you probably want to tell the mouseout to not change the background if it has been clicked. Classes can be handy for this purpose. It should be something like this.

Live example: http://jsfiddle.net/qNmZe/

$(".menu_clickable").mouseover(function() {
    $(this).css({'background-color' : '#F00'});
});

$(".menu_clickable").mouseout(function(){
    if(!$(this).hasClass('clicked'))
        $(this).css({'background-color' : '#FFF'}); 
});


$(".menu_clickable").live('click', function() { 
    $(this).css({'background-color' : '#FCC'})
            .addClass('clicked');
});

EDIT: In fact, since you're assigning a clicked class to the element, you could just use that for your styling instead of directly applying a background-color. Up to you, though.

---

1. You are attaching way too many mouseout handlers. Every time you move the mouse over your menu_clickable, you change bacgkround and then you attach another mouseout event. That's bad.

2. You are attaching click event "live" and mouse* with normal procedure. Why? Basically if you need live attaching use it, otherwise better stay clear (better performance).

3. It is much easier to use css classes to change UI. Like

CSS

.menu_clickable { background-color: #FFF; /* default color */ }
.clicked { background-color: #FCC; /* color for clicked button */ }
.mouseover { background-color: #F00; /* color when hovered */ }

HTML

<div class="menu_clickable prof_info2" id="prof_info">first</div>
<div class="menu_clickable prof_info3" id="prof_info">second</div>
<div class="menu_clickable prof_info3" id="prof_info">third</div>

jQuery

$(document).ready(function () {
    $(".menu_clickable")
        .mouseover(function () {
            var t = $(this);
            if (!t.hasClass("clicked")) {  // very easy to check if element has a set of styles
                t.addClass('mouseover');
            }
        })
        .mouseout(function () {  // attach event here instead of inside mouse over
            $(this).removeClass('mouseover');
        });

    $(".menu_clickable").click(function () {
        var t = $(this);
        t.toggleClass("clicked");
        if (t.hasClass("clicked")) {
            t.removeClass('mouseover');
        } else {
            t.addClass('mouseover');
        }
    });
});

This will have a hover effect if button is not clicked; when clicked it stays #FCC until clicked again.

---

Because the mouseout event changes the color again after the click.