当鼠标悬停在最后一个孩子上时，嵌套的div也将其父对象悬停

Question

我遇到此问题，我有以下代码：

article .node-inside>div:hover >label{
    border:1px solid red;
}

<div>
  <section>
  
    <div>
      <input type="text" />
      <label for="">text  </label>
      <article>
      
        <div class="node-inside">
          <div>
            <input type="text" />
            <label for="">text  </label>
            
            <article>
              <div class="node-inside">
                <div>
                <input type="text" />
                <label for="">text   </label>
                
                  <article>

                  </article>
                </div>
              </div>
            </article>
          </div>
        </div>
       </article>
    </div>
    
  </section>
</div>

这是我的代码，它根据我拥有的级别数来进行更深层的嵌套，并且我不能在级别上放置不同的类，因为它是动态的，当我将标签悬停在最后一个div上时，我需要能够不是父母。这可能吗..？我该怎么办，请帮忙！

Answer 1

当您将标签或输入悬停在标签之前时，应用样式

x

.node-inside input:hover + label, 
.node-inside label:hover{
    border:1px solid red;
}

Answer 2

您的方法行不通，因为用户实际上是将鼠标悬停在第二个div上，并且CSS中没有办法说“将鼠标悬停在某个div上，但不是它的特定部分”。
那么，如果您不悬停任何div但仅悬停输入和标签，该怎么办？那对你有用吗？

article > .node-inside > div > input:hover + label,
article > .node-inside > div > input + label:hover {
    border:1px solid red;
}

<div>
  <section>
  
    <div>
      <input type="text" />
      <label for="">text outer </label>
      <article>
      
        <div class="node-inside">
          <div>
            <input type="text" />
            <label for="">text level 2  </label>
            
            <article>
              <div class="node-inside">
                <div>
                <input type="text" />
                <label for="">text level 3  </label>
                
                  <article>

                  </article>
                </div>
              </div>
            </article>
          </div>
        </div>
       </article>
    </div>
    
  </section>
</div>