jquery stop mouseover event after click event

Question

can someone help me with this

I am trying to set a different color for the element from the click event.

The problem is that the mouseover event makes everything white again. So, I will never get to see the color off the active(actief)class.

What could I do, I already try'd putting in the line stopevent propagation()??

thanks, Richard

$("#tbestel_opties2 span").live("mouseover", function() {
            $t=$(this);
            if(!$t.hasClass('actief')){

                $t.css({'color':'#fff','backgroundColor':'#fdc601'}); 
            }
        });
        $("#tbestel_opties2 span").live("mouseout", function() {
                $t=$(this);
                if(!$t.hasClass('actief')){
                $t.css({'color':'#333','backgroundColor':'#fdc601'});                                                                          }
        });

        $("#tbestel_opties input,#tbestel_opties2 span").live("click", function(e)
        {e.stopPropagation(); 
            $t=$(this);
              $('#tbestel_opties2 .actief').removeClass("actief").css({'color':'#333'});

             $t.addClass("actief")

            $("#opties li:eq(0)").addClass("actief");


    }); 

Answer 1

Use a class instead. When an element is clicked, add another class to the element. Make sure this class is not set before you do anything in mouseover/out. This also has the advantage of allowing you to move the styling of the clicked elements into your CSS if you wish.

Answer 2

That stop propagation function stops the default behavior of the click event and has no bearing on the mouseover.

Changing your use of the css selector to an addClass function that corresponds with those CSS changes, you'll be able to get the order of events you're looking for.

Answer 3

Not to rain on the JQuery parade, but why not just use the :hover psuedo class?

Answer 4

try this in your mouseover event:

var currentColor = $(this).css("background-color");
jQuery.data($(this).get(0), "basecolor", currentColor);

it stores metadata with the element. you could then read that value in the click event

var currentColor = jQuery.data($(this).get(0), "basecolor");