如何在不工作之前将鼠标悬停在另一个元素上时更改一个元素

Question

HTML

<div class="related_files_data">
<h2>
    <a href="./?a=content.id&amp;id=96">example 1</a>
</h2>
<h2>
    <a href="./?a=content.id&amp;id=95">example 2</a>
</h2>                               

CSS

.related_files_data h2::before {
    color: #6dd7f8;
    content: "";
    font-family: fontawesome;
    font-size: 14px;
}
.related_files_data:hover + h2::before {
    color: #f8482e;
    content: "";
    font-family: fontawesome;
    font-size: 14px;
}

我想更改悬停第一个元素

上的图标

代码编写效果不佳

Answer 1

使用selector:state:psuedo，您可以将选择器置于其状态：

.related_files_data h2:hover:before{
    color: #f8482e;
    content: "";
    font-family: fontawesome;
    font-size: 14px;
}

.related_files_data h2::before {
    color: #6dd7f8;
    content: "";
    font-family: fontawesome;
    font-size: 14px;
}
.related_files_data h2:hover::before {
    color: #f8482e;
    content: "";
    font-family: fontawesome;
    font-size: 14px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="related_files_data">
<h2>
    <a href="./?a=content.id&amp;id=96">example 1</a>
</h2>
<h2>
    <a href="./?a=content.id&amp;id=95">example 2</a>
</h2>