Question

我编写了一个脚本，使相关的搜索框具有默认的边框颜色，悬停边框颜色和单击的边框颜色。有没有办法可以增加这个代码，使其即使你在搜索框中点击鼠标悬停或鼠标移开，边框仍然是蓝色？

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 1

这是因为点击后，mouseout / mouseover仍可正常运行...尝试

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

或

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

Answer 2

当然，你可以使用信号量

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

即使在mouseout之后，如何使搜索框保持蓝色？

2 个答案: