Question

当用户将鼠标悬停在div上时，它应该变为红色，当它们鼠标移出时应该变回透明状态。当他们点击div时，它应该变为红色。

由于某种原因，mouse out事件侦听器与click事件侦听器冲突。有人可以帮忙吗？当我点击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和香草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 mouseenter的see why内容。

Answer 4

您可以使用的最好的事情是以下注释：

对具有悬停效果的元素添加类似hoverable。
悬停效果仅适用于具有此类的元素。

HTML：

<div class="hoverable"></div>

CSS：

.hoverable:hover{
    background-color: red
}

JavaScript的：

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

通过这种方式，您可以通过添加或删除hoverable类来简单地确定元素是否应该悬停。此外，悬停效果也适用于CSS级别而非JavaScript，这是更可接受的。

Answer 5

据我了解，你真的想在div中更改 picture ，而不仅仅是背景颜色，这相对容易。试试这个：

<div class="hoverable">
<img src="myImg.jpg" />
</div>

//css
.hoverable img{visibility:hidden;}
.hoverable:hover img{visibility:visible;}
.clicked img{visibility:visible!important;}

//JS
$('.hoverable').click(function(){
    $(this).addClass('clicked');
});

鼠标拖出并单击

5 个答案: