悬停一个按钮并更改里面的字体类真棒图标

Question

我现在实际上很愤怒，因为我在不同的项目中做了完全相同的事情，而且它奏效了。我有一个我做的按钮，它是一个<a>标签。在<a>标签中，我有一个图标<i class="fa">。当我将鼠标悬停在按钮上时，我希望<i>图标的颜色发生变化。我肯定代码是正确的，只是拒绝工作。这是我的代码：

.HTML：

<div id="workspace">
<a href="#" class="hlo-btn-round">Search <i class="fa fa-search fa-color" aria-hidden="true"></i></a>
</div>

.CSS：

/* Control Icon Color */
.fa-color {
color: #99999a;
}
/* Control Icon Color on Hover (scripted) */
.fa-hover-color {
color: #323335;
}

/* Basic Round Button Styling */
.hlo-btn-round, .hlo-btn-round:link, .hlo-btn-round:visited, .hlo-btn-round:active, .hlo-btn-round:focus {
margin-top: 0px;
padding: 5px 20px;
border: 1px solid transparent;
border-radius: 25px;
line-height: 1.42857143;
font-family: "Trebuchet MS";
text-decoration: none;
text-decoration-color: black;
vertical-align: middle;
background-color: white;
color: black;
cursor: pointer;
display: inline-block;
}
.hlo-btn-round:hover {
background-color: #CCCCD1;
}

脚本：

$('hlo-btn-round').hover(function(){
$(this).children().switchClass('fa-color', 'fa-hover-color');
}, function(){
$(this).children().switchClass('fa-hover-color', 'fa-color');
});

Answer 1

不需要脚本，应该可以在纯 CSS 中执行 - 见下文：

/* Control Icon Color */
.fa-color {
color: #99999a;
}
/* Basic Round Button Styling */
.hlo-btn-round, .hlo-btn-round:link, .hlo-btn-round:visited, .hlo-btn-round:active, .hlo-btn-round:focus {
margin-top: 0px;
padding: 5px 20px;
border: 1px solid transparent;
border-radius: 25px;
line-height: 1.42857143;
font-family: "Trebuchet MS";
text-decoration: none;
text-decoration-color: black;
vertical-align: middle;
background-color: white;
color: black;
cursor: pointer;
display: inline-block;
}
.hlo-btn-round:hover {
background-color: #CCCCD1;
}
.hlo-btn-round:hover .fa {
color: #323335;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div id="workspace">
<a href="#" class="hlo-btn-round">Search <i class="fa fa-search fa-color" aria-hidden="true"></i></a>
</div>

Answer 2

编辑：正如@ochi在您的问题下方的评论中很好地发现的那样，您的错误是相当常见的错误。您正在选择$('hlo-btn-round')这将选择任何

<hlo-btn-round></hlo-btn-round>

。元素，事实上，您可能应该使用$('.hlo-btn-round').

通过使用更好的编码工具(例如适当的 IDE)，您可以轻松避免此类错误，这些工具会立即为您突出显示拼写错误。

---

最初的答案：.switchClass()(我以前从未听说过 - 而且我不完全是一个菜鸟)似乎是jQueryUI的一部分。也许您在另一个项目中加载了它，但没有在此项目中加载。

jQuery提供了更流行的.toggleClass()，它也可以将函数作为第二个参数来检查条件并返回该条件的true(添加类)或false(删除类)。

但是，您真的不需要为此JavaScript。一个简单的：

.parent .child {/* normal state CSS here */}
.parent:hover .child {/* hover state CSS here */}

。会的。或parent .child:hover{}，具体取决于您的需要(在悬停时要触发效果的元素上设置:hover)。