css 嵌套树悬停

Question

我有一个非常简单的嵌套树列表，我想在悬停 .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>

Answer 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>

css 嵌套树悬停

css nested tree hover

html

css

hover