1

Как изменять цвет иконок при наведении на блок, их содержащий?

ul {
  padding-left: 20px;
  list-style: none;
}
li {
  margin-bottom: 10px;
}
p1,
p2,
p3,
p4,
p5,
p6 {
  background-color: #000;
  color: #fff;
}
p1:hover p1:before,
p2:hover p2:before,
p3:hover p3:before,
p4:hover p4:before,
p5:hover p5:before,
p6:hover p6:before {
  color: red;
}
p1:before {
  font-family: 'FontAwesome';
  content: "\f0c9";
  padding: 0 5px 0 15px;
}
p2:before {
  font-family: 'FontAwesome';
  content: "\f0ac";
  padding: 0 5px 0 15px;
}
p3:before {
  font-family: 'FontAwesome';
  content: "\f082";
  padding: 0 5px 0 15px;
}
p4:before {
  font-family: 'FontAwesome';
  content: "\f09c";
  padding: 0 5px 0 15px;
}
p5:before {
  font-family: 'FontAwesome';
  content: "\f095";
  padding: 0 5px 0 15px;
}
p6:before {
  font-family: 'FontAwesome';
  content: "\f022";
  padding: 0 5px 0 15px;
}
p7:before {
  font-family: 'FontAwesome';
  content: "\f054";
  padding: 0 5px 0 15px;
}
p8:before {
  font-family: 'FontAwesome';
  content: "\f003";
  padding: 0 5px 0 15px;
}
p9:before {
  font-family: 'FontAwesome';
  content: "\f081";
  padding: 0 5px 0 15px;
}
p10:before {
  font-family: 'FontAwesome';
  content: "\f002";
  padding: 0 5px 0 15px;
}
p11:before {
  font-family: 'FontAwesome';
  content: "\f073";
  padding: 0 5px 0 15px;
}
p12:before {
  font-family: 'FontAwesome';
  content: "\f0e8";
  padding: 0 5px 0 15px;
}
/* V 4.4 */

p13:before {
  font-family: 'FontAwesome';
  content: "\f255";
  padding: 0 5px 0 15px;
}
p14:before {
  font-family: 'FontAwesome';
  content: "\f256";
  padding: 0 5px 0 15px;
}
p15:before {
  font-family: 'FontAwesome';
  content: "\f257";
  padding: 0 5px 0 15px;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<p1>1</p1>
<br>
<p2>2</p2>
<br>
<p3>3</p3>
<br>

<p4>4</p4>
<br>
<p5>5</p5>
<br>
<p6>6</p6>
<br>

ссылка на фидл

0

2 ответа 2

3

Просто меняйте цвет у того элемента на который навели, а не вложенного.
При записи

p1:hover p1:before,

будет выбран этот элемент

<p1>
    <p1>::before</p1>
</p1>

Так как если в селекторе используется пробел, начинает искаться внутренний элемент.

ul {
  padding-left: 20px;
  list-style: none;
}
li {
  margin-bottom: 10px;
}
p1,
p2,
p3,
p4,
p5,
p6 {
  background-color: #000;
  color: #fff;
}
p1:hover:before,
p2:hover:before,
p3:hover:before,
p4:hover:before,
p5:hover:before,
p6:hover:before {
  color: red;
}
p1:before {
  font-family: 'FontAwesome';
  content: "\f0c9";
  padding: 0 5px 0 15px;
}
p2:before {
  font-family: 'FontAwesome';
  content: "\f0ac";
  padding: 0 5px 0 15px;
}
p3:before {
  font-family: 'FontAwesome';
  content: "\f082";
  padding: 0 5px 0 15px;
}
p4:before {
  font-family: 'FontAwesome';
  content: "\f09c";
  padding: 0 5px 0 15px;
}
p5:before {
  font-family: 'FontAwesome';
  content: "\f095";
  padding: 0 5px 0 15px;
}
p6:before {
  font-family: 'FontAwesome';
  content: "\f022";
  padding: 0 5px 0 15px;
}
p7:before {
  font-family: 'FontAwesome';
  content: "\f054";
  padding: 0 5px 0 15px;
}
p8:before {
  font-family: 'FontAwesome';
  content: "\f003";
  padding: 0 5px 0 15px;
}
p9:before {
  font-family: 'FontAwesome';
  content: "\f081";
  padding: 0 5px 0 15px;
}
p10:before {
  font-family: 'FontAwesome';
  content: "\f002";
  padding: 0 5px 0 15px;
}
p11:before {
  font-family: 'FontAwesome';
  content: "\f073";
  padding: 0 5px 0 15px;
}
p12:before {
  font-family: 'FontAwesome';
  content: "\f0e8";
  padding: 0 5px 0 15px;
}
/* V 4.4 */

p13:before {
  font-family: 'FontAwesome';
  content: "\f255";
  padding: 0 5px 0 15px;
}
p14:before {
  font-family: 'FontAwesome';
  content: "\f256";
  padding: 0 5px 0 15px;
}
p15:before {
  font-family: 'FontAwesome';
  content: "\f257";
  padding: 0 5px 0 15px;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<p1>1</p1>
<br>
<p2>2</p2>
<br>
<p3>3</p3>
<br>

<p4>4</p4>
<br>
<p5>5</p5>
<br>
<p6>6</p6>
<br>

2
....
p1:hover:before {
    color: red;
}
...

Ваш ответ

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

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