Question

如何使目标元素（忽略父元素）仅触发:hover？

假设这是对象内部对象的递归设计，因此具有相同的类和自动生成的ID。

.group:hover {
  background-color: red;
}

.group {
  border: 1px solid black;
  width: 100px;
  padding: 20px;
}

<div id="g1" class="group">aaaa
  <div id="g2" class="group">bbbb
    <div id="g3" class="group">cccc
    </div>
  </div>
</div>

Answer 1

由于您使用javascript标记了问题，因此可以使用它来实现。关键是使用.stopProgagation()，这将阻止事件从“下降”到您的其他元素。

请参见以下示例：

document.querySelectorAll(".group").forEach(elem => {
  elem.addEventListener('mouseover', function(e) {
    e.stopPropagation();
    this.classList.add('group-hover');
  });
  
  elem.addEventListener('mouseout', function(e) {
    this.classList.remove('group-hover');
  });
});

.group-hover {
  background-color: red;
}

.group {
  border: 1px solid black;
  width: 100px;
  padding: 20px;
}

<div id="g1" class="group">aaaa
  <div id="g2" class="group">bbbb
    <div id="g3" class="group">cccc
    </div>
  </div>
</div>

或者，如果您不想使用e.target，则可以使用stopPropagation()来获取事件的目标：

document.querySelectorAll(".group").forEach(elem => {
  elem.addEventListener('mouseover', e => e.target.classList.add('group-hover'));
  elem.addEventListener('mouseout', e => e.target.classList.remove('group-hover'));
});

.group-hover {
  background-color: red;
}

.group {
  border: 1px solid black;
  width: 100px;
  padding: 20px;
}

<div id="g1" class="group">aaaa
  <div id="g2" class="group">bbbb
    <div id="g3" class="group">cccc
    </div>
  </div>
</div>

Answer 2

仅适用于JS，并使用事件委托以更简单的方式

const All_g = document.querySelector('#g1');

All_g.onmouseover = function(event) {
  let target = event.target;
  target.style.background = 'red';
};

All_g.onmouseout = function(event) {
  let target = event.target;
  target.style.background = '';
};

.group {
  border: 1px solid black;
  width: 100px;
  padding: 20px;
}

<div id="g1" class="group">aaaa
  <div id="g2" class="group">bbbb
    <div id="g3" class="group">cccc
    </div>
  </div>
</div>

一些说明：=> https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave

Answer 3

您可以通过以下方式进行操作：

var elements = document.getElementsByClassName('group');
var lastElement = null;
elements.each(element =>{
    lastElement = element;
});
lastElement.on('hover', function(){
    //do anything you wish with element
})

Answer 4

方法1

注册悬停事件以切换类并使用event.stopPropagation（）;

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

事件接口的气泡只读属性指示事件是否通过DOM引发。

https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles

方法2

Mouseenter事件-根据设计，它不会冒泡-因此不必执行event.stopPropagation（）

尽管与鼠标悬停类似，但区别在于它不会冒泡并且指针移出时不会发送给任何后代它的后代的物理空间之一变为自己的物理空间。

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event

：hover仅选择目标，而不选择同班的父母

4 个答案: