Вложенные разделы при наведении курсора мыши на последнего дочернего элемента он перемещается также на родительский

#html #css

#HTML #css

Вопрос:

Я сталкиваюсь с этой проблемой, у меня есть этот код:

 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 ограничивать метку только тем, что не родительский. Возможно ли это ..? как я могу это сделать, пожалуйста, помогите!!

1. Интересно, какой смысл в вложенности article элементов должен иметь в первую очередь …

2. Наведение курсора мыши на элемент всегда означает одновременное наведение курсора на всех предков (аналогично запуску события наведения курсора мыши в JS), с этим вы ничего не можете поделать. Вам нужно найти другую структуру или другой подход.

3. Меня больше всего беспокоят пустые for="" атрибуты.

Ответ №1:

Применяйте стиль при наведении курсора мыши на метку или входные данные перед ее меткой

 .node-inside input:hover   label, 
.node-inside label:hover{
    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>

Ответ №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>