html - 悬停时更改后内容的颜色和背景

Question

悬停时需要将搜索框的背景更改为透明，将搜索图标更改为白色。我尝试了但无法达到目标。

我想在下面的代码中应用悬停 CSS。

fusion-main-menu .fusion-main-menu-search a:after {
    font-family: FontAwesome;
    color: #5b646d !important;
    background: #fff;
    padding: 8px 10px;
    border-radius: 4px;
}

Answer 1

使用a:hover:after{}

例如

a:after{
   font-family: "Font Awesome 5 Free";
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight: 900;
}
a:hover:after{
color:red;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<a>try me</a>