CSS嵌套树悬停答案

【问题标题】：css nested tree hoverCSS嵌套树悬停
【发布时间】：2021-02-04 22:21:54
【问题描述】：

我有一个非常简单的嵌套树列表，我想在 .myLinks 悬停时更改悬停项目的背景。我怎样才能做到这一点？

.myLinks{
    
    min-height:10px;
    min-width:10px;
    padding: 10px;
}

.myLinks:hover{
        background: red;  
    }

<div class="myLinks">
  Some Links
  <div class="myLinks">
    Some Links
    <div class="myLinks">
      Some Links
      <div class="myLinks">
        Some Links
        <div class="myLinks">
          Some Links
          <div class="myLinks">Some Links</div>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css hover

【解决方案1】：

你可以在这里使用 mouseenter 和 mousleave 事件

在此处的解决方案中，我假设您要突出显示链接。

const links = [...document.querySelectorAll('a')];

links.forEach(link => {
  link.addEventListener('mouseenter', () => {
    if(links.includes(link.parentNode))
      link.parentNode.classList.remove('myLinksHover');
    link.classList.add('myLinksHover');
  });
  
  link.addEventListener('mouseleave', () => {
    if(links.includes(link.parentNode))
      link.parentNode.classList.add('myLinksHover');
    link.classList.remove('myLinksHover');
  });
});

.myLinks{
    
    min-height:10px;
    min-width:10px;
    padding: 10px;
}

.myLinksHover{
        background: red;  
    }

<div class="myLinks">
  Some Links
  <a href="BLA">Hi</a>
  <div class="myLinks">
    Some Links
    <a href="BLA">Hi</a>
    <div class="myLinks">
      Some Links
      <a href="BLA">Hi</a>
      <div class="myLinks">
        Some Links
        <a href="BLA">Hi</a>
        <div class="myLinks">
          Some Links
          <a href="BLA">Hi</a>
          <div class="myLinks">Some Links
          <a href="BLA">Hi</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：