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

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> 

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

 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

Event接口的Bubbles只读属性指示事件是否通过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