如何在悬停另一个元素之前更改颜色：

Question

这是我的代码：

span{
  color: #666;
}
span:before{
	content: "\f059";
	display: inline-block;
	vertical-align: middle;
	font-size: 15px;
  font-family: FontAwesome;
	color: #999;
  margin-right: 10px;
}

span:hover{
  color: red;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span>something</span>

现在我需要在<span>的悬停时将该图标设为红色。我怎么能这样做？

Answer 1

如果你只想改变之前的elem颜色：

＆＃13;

＆＃13;

span{
  color: #666;
}
span:before{
	content: "\f059";
	display: inline-block;
	vertical-align: middle;
	font-size: 15px;
  font-family: FontAwesome;
	color: #999;
  margin-right: 10px;
}

span:hover:before{
  color: red;
}

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span>something</span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加小css，你就完成了

span:hover:before {
  color: red;
}

这是片段

＆＃13;

＆＃13;

span{
  color: #666;
}
span:before{
	content: "\f059";
	display: inline-block;
	vertical-align: middle;
	font-size: 15px;
  font-family: FontAwesome;
	color: #999;
  margin-right: 10px;
}

span:hover{
  color: red;
}

span:hover:before {
  color: red;
}

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span>something</span>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用以下选择器：

span:hover,
span:hover:before {
  color: red;
}

<强>演示：

＆＃13;

＆＃13;

span {
  color: #666;
}
span:before{
  content: "\f059";
  display: inline-block;
  vertical-align: middle;
  font-size: 15px;
  font-family: FontAwesome;
  color: #999;
  margin-right: 10px;
}

span:hover,
span:hover:before {
  color: red;
}

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span>something</span>

＆＃13;

＆＃13;

＆＃13;