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。）

盘旋按钮和更改类字体真棒图标里面

2 个答案: