Mouseout并单击

Question

当用户将鼠标移到div上时，它应该变成红色，当他们用鼠标移出时，它应该变回透明。当他们点击div时，它应该会变成红色。

由于某些原因，鼠标输出事件侦听器与单击事件侦听器冲突。有人能帮帮忙吗？当我点击div时，它不会变成红色。

div$.on('mouseover', function () {
  $(this).css('background-color', 'red');
});

div$.on('mouseout', function () {
  $(this).css('background-color', 'white');
});

div$.on('click', function () {
  $(this).css('background-color', 'red');
});

请注意，我必须对每个元素动态应用背景图像，所以使用CSS类添加背景图像是不可能的(因为我事先并不知道)。

Answer 1

您可以设置一个boolean变量来确认已发生单击，然后仅在变量为false时运行mouseout代码，如下所示：

var is_clicked = false;

div$.on('mouseover', function () {
  $(this).css('background-color', 'red');
});

div$.on('mouseout', function () {
  if(!is_clicked) {
    $(this).css('background-color', 'white');
  }
});

div$.on('click', function () {
  $(this).css('background-color', 'red');
  is_clicked = true;
});

注意:对于多个div元素，请使用多个is_clicked变量

Answer 2

您总是可以使用:hover实现CSS；只需确保为每个您希望实现此效果的元素添加一个指定的类即可。

1. :hover 和jQuery

​

var div$ = $('.redHover'); // name the class whatever you like

div$.on('click', function () {
  $(this).css('background-color', 'red');
});

div {
  display: inline-block;
}

.redHover {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

.redHover:hover {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='redHover'></div>
<div class='redHover'></div>
<div class='redHover'></div>

​

2. :hover 和vanilla JS

​

var els = document.querySelectorAll('.redHover');

for (var i = 0; i < els.length; ++i) { 
  els[i].addEventListener('click', function() {
    this.style.backgroundColor = 'red';
  });
}

div {
  display: inline-block;
}

.redHover {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

.redHover:hover {
  background: red;
}

<div class='redHover'></div>
<div class='redHover'></div>
<div class='redHover'></div>

​

Answer 3

取而代之的是mouseover see why的mouseenter insead。