CODEWITHSUNDEEP
jquery
femmebug
femmebug

Reputation: 105

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

Upvotes: 0

Views: 29

Answers (2)

Lajos Arpad
Lajos Arpad

Reputation: 76884

Sure, you can use a semaphore

var searchBar = $(".qstxtcommon");
var clicked = false;

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

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

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

Upvotes: 1

Özgür Ersil
Özgür Ersil

Reputation: 7013

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

Upvotes: 2

Related Questions