Question

我正在使用jquery将hover类添加到html文档中的某些元素。这样做很好，但是如果一个可悬停的元素有一个可以悬停的子元素，那么即使当前鼠标只在子元素上，它们也都会获得悬停类。

我该如何避免？

<div class="hoverable">
  text/html content
  <div class="hoverable"> tect/html content </div>
</div>

Answer 1

您应该在事件处理函数中阻止事件传播。

$('.hoverable').hover(function(event) {

    // Adding CSS class to the hovered element.
    $(this).addClass('hovered');

    // Preventing event propagation by calling stopPropagation()...
    event.stopPropagation();

    // Or by returning false.
    return false;

}, function(event) {

    // Removing CSS class from the hovered element.
    $(this).removeClass('hovered');

    // Preventing event propagation by calling stopPropagation()...
    event.stopPropagation();

    // Or by returning false.
    return false;
});

Answer 2

嗯......我们错过了一些背景。但是，让我们看看我们能做些什么......

我认为你不能做最简单的事情并设置单独的悬停类。那是......

<div class="hoverable-a">
  text/html content
  <div class="hoverable-b"> text/html content </div>
</div>

我认为你正在做类似......

的事情

$(".hoverable").hover(function() { ... });

上面将按照示例中的hoverable类选择所有内容。这里有几种方法。在悬停函数function() { ... }中，您可以添加...

（1）查明直接父母是否也有类hoverable，如果是，则跳过它

if ($(this).parent().is(".hoverable"))
  return;

和类似的

if ($(this).closest(".hoverable").length > 0)
  return;

（2）如果每个父元素都包含子可暂存元素，那么请确保没有子元素

if（$（this）.children（＆＃34; .hoverable＆＃34;）！= 0）返回;

（3）我确定还有其他解决方案。这取决于你的确切结构：）

jQuery在嵌套时一次悬停一个元素

2 个答案: