javascript - 使用 jQuery 更改鼠标悬停时的图标

Question

我正在尝试使用 jQuery 在 mouseover 上更改我的图标.使用语义 UI，如果您添加 "outline"，一些/大多数图标可能会有所不同作为一个类(class)。例如:<i class="icon user"></i>和 <i class="icon user outline"></i> .

我的想法是在 mouseover 上使用 jQuery 简单地切换类大纲。 ，但后来我遇到了一些问题:

1. 因为 a在 nav 内被选中，如果您将鼠标悬停在 li 上里面a ，该函数将再次运行。仅当您将鼠标悬停在整个 a 上时它才有效.

2. 它会更改导航下拉菜单中的所有图标，而不仅仅是我悬停的图标。

3. 即使我将光标移开，效果仍然存在，并且只有在我再次将鼠标悬停在该元素上时才会消失。 (也许添加一个 mouseout ？)

4. "home" icon没有大纲版，应该不会受到影响。

我希望思路清晰。

JSFiddle

HTML

<nav class="smallNav">
  <ul>
    <a href="#">
      <li><i class="icon home"></i>Home</li>
    </a>
    <a href="#">
      <li><i class="icon star outline"></i>Featured</li>
    </a>
    <a href="#">
      <li><i class="icon newspaper outline"></i>News</li>
    </a>
    <a href="#">
      <li><i class="icon user outline"></i>Career</li>
    </a>
    <a href="#">
      <li><i class="icon envelope outline"></i>Contact</li>
    </a>
  </ul>
</nav>

jQuery

$('nav a').mouseover(function() {
  $('nav i').toggleClass('outline');
})

Answer 1

$('nav a').hover(function() {
    if (!$(this).find("i").hasClass("home")) {
    $(this).find("i").toggleClass('outline');
  }
})

修改:将方法更改为悬停

它只为 <i> 切换类那是那个特定 <a> 的 child ，并且只有当它没有 home 时类