2

Всем привет! Решения на стаке для себя так и не нашел, поэтому спрошу сам :) Есть разметка:

<div class="top">
 <div class="buttons"><i class="fa fa-address-book-o" aria-hidden="true"></i> Кнопка 1</div>
 <div class="buttons"><i class="fa fa-etsy" aria-hidden="true"></i> Кнопка 2</div>
 <div class="buttons"><i class="fa fa-id-badge" aria-hidden="true"></i> Кнопка 3</div>
</div>

Задача в том чтобы при наведении на див "buttons" менялся цвет для его "i". Все мои попытки приводят к тому что меняются свойства элемента для всех 3х кнопок.

2
  • у вас в i ничего не заполено так и должно быть? 7 авг 2017 в 8:31
  • да это шрифт font-awesome 7 авг 2017 в 8:37

2 ответа 2

5

Нужно воспользоваться селектором >, который выбирает непосредственного потомка.

Пример: div > p

В сочетании с наведением соответственно будет .buttons:hover > i

Больше о селекторах здесь: developer.mozilla.org/ru/docs/Web/CSS/CSS_Селекторы

2
  • Сработало замечательно, благодарю! 7 авг 2017 в 8:46
  • @Владимир если ответ вас устраивает, не забудьте принять его (галочка слева от ответа).
    – Regent
    7 авг 2017 в 9:02
2

//Скрипт с применением hover из коментариев
$('.buttons').hover(function() { $(this).find('i').toggleClass('color'); });
.color{
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
 <div class="buttons"><i class="fa fa-address-book-o" aria-hidden="true">test</i> Кнопка 1</div>
 <div class="buttons"><i class="fa fa-etsy" aria-hidden="true">test</i> Кнопка 2</div>
 <div class="buttons"><i class="fa fa-id-badge" aria-hidden="true">test</i> Кнопка 3</div>
</div>

3
  • Прекрасно! Благодарю! 7 авг 2017 в 8:48
  • В принципе, JS код можно сократить до $('.buttons').hover(function() { $(this).find('i').toggleClass('color'); });
    – Regent
    7 авг 2017 в 9:01
  • @Regent, спасибо) с hover проблемы) мало опыта с ними. и даже не подумал что можно вприн и на css сделать) 7 авг 2017 в 9:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.