femmebug femmebug - 3 months ago 15
jQuery Question

How to make the search box remain blue even after mouseout?

I wrote a script to make the search box in question have a default border color, hover border color and clicked border color. Is there a way could augment this code to make it to where even if you mouseover or mouseout after you've clicked in the search box, the border remains blue?

var searchBar = $(".qstxtcommon");

$(searchBar).on("mouseover", function() {
$(searchBar).css("border-color", "#666666")
});

$(searchBar).on("mouseout", function() {
$(searchBar).css("border-color", "#b7b7b7")
});

$(searchBar).on( "click", function() {
$(searchBar).css("border-color", "#3fa9f5");
});

Answer

It is because after click, mouseout / mouseover still works... try that

$(searchBar).on( "click", function() {
  $(searchBar).css("border-color", "#3fa9f5");
  $(searchBar).on("mouseout",null);
  $(searchBar).on("mouseover",null);
});

or

$(searchBar).on( "click", function() {
   $(searchBar).css("border-color", "#3fa9f5");
   $(searchBar).off("mouseout");
   $(searchBar).off("mouseover");
});
Comments