[分享]css不触发父元素的hover

CSS不触发父元素的hover是一个非常常见的问题，它指的是当子元素被鼠标hover时，父元素并不会触发hover效果。这个问题通常出现在DOM结构不是很清晰的情况下，比如在一个列表中，每个列表项中都...

CSS不触发父元素的hover是一个非常常见的问题，它指的是当子元素被鼠标hover时，父元素并不会触发hover效果。

这个问题通常出现在DOM结构不是很清晰的情况下，比如在一个列表中，每个列表项中都有一个链接元素。如果我们想让当鼠标hover在链接元素上时，整个列表项都有一个hover效果，这个问题就会出现。

<ul>
  <li>
    <a href="...">Link</a>
  </li>
</ul> 

我们会尝试使用CSS的嵌套选择器来解决这个问题：

ul li:hover {
  background-color: #f6f6f6;
} 

然而，这段代码并没有解决问题，因为当鼠标hover在链接元素上时，列表项并没有触发hover效果。

解决这个问题的一个简单的办法是把鼠标事件绑定到父元素上，而不是子元素，然后通过JavaScript来处理hover效果。

const listItems = document.querySelectorAll('li');

listItems.forEach(item => {
  item.addEventListener('mouseover', () => {
    item.style.backgroundColor = '#f6f6f6';
  });

  item.addEventListener('mouseout', () => {
    item.style.backgroundColor = 'transparent';
  });
}); 

这个代码会监听每个列表项的鼠标事件，并在鼠标悬浮时动态改变背景颜色来模拟hover效果。

总之，CSS不触发父元素的hover是一个棘手的问题，但在正确的DOM结构和合理的JavaScript代码帮助下，它是可以被解决的。