Question

我想用mouseover和mouseleave绑定项目以突出显示我创建的功能。我的脚本不起作用，我也不知道自己在做什么错。

$(function() {
  $("#evtTarget").bind("mouseover", highlight);
  $("#evtTarget").bind("mouseleave", highlight);
});

function highlight(evt) {
  $("#evtTarget").toggleClass(highlighted);
}

.normal {
  width: 300px;
  height: 200px;
  background-color: Yellow;
  font-size: 18pt;
}

.highlighted {
  background-color: Red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Binding and Unbinding Events with jQuery</title>
</head>

<body>
  <h1>Binding Event Example</h1>
  <div id="evtTarget" class="normal">Mouse over this div to see the effect. Click on it to unbind the mouseover.</div>
</body>

</html>

Answer 1

您的逻辑问题在于，highlighted需要作为字符串提供给toggleClass()方法：

$(function() {
  $("#evtTarget").bind("mouseover", highlight);
  $("#evtTarget").bind("mouseleave", highlight);
});

function highlight(evt) {
  $("#evtTarget").toggleClass('highlighted');
}

.normal {
  width: 300px;
  height: 200px;
  background-color: Yellow;
  font-size: 18pt;
}

.highlighted {
  background-color: Red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Binding Event Example</h1>
<div id="evtTarget" class="normal">Mouse over this div to see the effect. Click on it to unbind the mouseover.</div>

话虽这么说，这里绝对不需要任何JS或jQuery，因为通过使用CSS中的:hover伪选择器，您可以更有效地实现相同的效果（并具有更好的性能）：

.normal {
  width: 300px;
  height: 200px;
  background-color: Yellow;
  font-size: 18pt;
}

#evtTarget:hover {
  background-color: Red;
}

<h1>Binding Event Example</h1>
<div id="evtTarget" class="normal">Mouse over this div to see the effect. Click on it to unbind the mouseover.</div>

如果您要实现div文本中指出的行为，即单击div本身时将禁用悬停行为，则可以向该元素添加一个类，然后使CSS规则足够具体，以使:hover不会覆盖它，就像这样：

$('#evtTarget').click(function() {
  $(this).addClass('disable-hover');
});

.normal {
  width: 300px;
  height: 200px;
  background-color: Yellow;
  font-size: 18pt;
}

#evtTarget:hover {
  background-color: Red;
}

#evtTarget.disable-hover {
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Binding Event Example</h1>
<div id="evtTarget" class="normal">Mouse over this div to see the effect. Click on it to unbind the mouseover.</div>

Answer 2

您几乎已经拥有了，您忘记了""中的$("#evtTarget").toggleClass(highlighted);

应为$("#evtTarget").toggleClass("highlighted");

演示

function highlight() {
  $("#evtTarget").toggleClass("highlighted");
}

$(function() {
  $("#evtTarget").bind("mouseover", highlight);
  $("#evtTarget").bind("mouseleave", highlight);
});

.normal {
  width: 300px;
  height: 200px;
  background-color: Yellow;
  font-size: 18pt;
}

.highlighted {
  background-color: Red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Binding Event Example</h1>
<div id="evtTarget" class="normal">Mouse over this div to see the effect. Click on it to unbind the mouseover.</div>

如何使用toggleClass

2 个答案: