Как изменять цвет иконок при наведении на блок, их содержащий?
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>