Блог

Главная - Вопросы по программированию - Как сразу изменить цвет шрифта вложенных HTML-элементов

Как сразу изменить цвет шрифта вложенных HTML-элементов

#html #css

Вопрос:

Я пытаюсь создать эффект наведения на ul, я пытаюсь найти способ изменить цвет шрифта элементов, которые находятся в ul при наведении.

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

 .wt-description p:hover {
  color: white !important;
} 
 <div class="col-12">
  <ul class="wt-categoryvtwo wt-categoryvthree">
    <li>
      <div class="wt-categorycontentvtwo">
        <figure><img src="#" alt="Category"></figure>
        <div class="wt-cattitlevtwo">
          <h4><a href="#">Mobiles</a></h4>
        </div>
        <div class="wt-description">
          <p>ios | android | ionic | pwa | flutter | react native more...</p>
        </div>
      </div>
    </li>
  </ul>
</div>

но я должен навести курсор на этот конкретный элемент, чтобы вызвать эффект наведения.

Я просто хочу знать, есть ли способ изменить цвет шрифта тегов a и p на белый сразу при наведении курсора?

Ваш ответ на это действительно ценен.

Комментарии:

1. Во-первых, ваш HTML неверен, в нем отсутствуют закрытие ul и li теги. Если вы хотите изменить несколько элементов одновременно, найдите ближайшего общего родителя и примените CSS там или объедините несколько классов для одного правила css

2. вы хотите использовать только чистый css? или вы можете использовать javascript или библиотеки javascript(jquery)?

3. «Я пытаюсь создать эффект зависания на ul»… так применить эффект наведения на ul , а не на p ?

Ответ №1:

Привет, Сохраняйте элементы a и p внутри div и применяйте к ним эффект наведения, в этом случае оба они изменятся на белый одновременно, как вы просили.

 <div class="col-12">
<ul class="wt-categoryvtwo wt-categoryvthree">
<li>
   <div class="wt-categorycontentvtwo">
      <figure><img src="#" alt="Category"></figure>
      <div class="selector">
         <div class="wt-cattitlevtwo">
            <h4><a href="#">Mobiles</a></h4>
         </div>
         <div class="wt-description">
            <p>ios | android | ionic | pwa | flutter | react native more...</p>
         </div>
      </div>
   </div>

создайте ссылки для наследования цвета, а затем примените эффект наведения на div, чтобы одновременно сделать текст обоих элементов белым:

 a{
  color:inherit;
}
.selector:hover{
 color:white;
}

Надеюсь, это поможет 🙂

Ответ №2:

Добавьте указатель мыши к элементу, содержащему оба элемента. В этом случае вы можете сделать это на ли или первом ребенке в ли. Или, если предполагается, что это будет весь UL сразу, как указано в вашем описании, наведите курсор на UL.

 li:hover, li:hover a {
  color: pink !important;
} 
 <div class="col-12">
  <ul class="wt-categoryvtwo wt-categoryvthree">
    <li>
      <div class="wt-categorycontentvtwo">
        <figure><img src="#" alt="Category"></figure>
        <div class="wt-cattitlevtwo">
          <h4><a href="#">Mobiles</a></h4>
        </div>
        <div class="wt-description">
          <p>ios | android | ionic | pwa | flutter | react native more...</p>
        </div>
      </div>
    </li>
  </ul>
</div>
Метки: