Question

我正在尝试使用jQuery在mouseover上更改我的图标。使用语义UI，如果将"outline"添加为类，则某些/大多数图标可能会有所不同。例如：和。

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

由于选择了a中的nav，如果将鼠标悬停在li内的a上，该功能将再次运行。只有当您将鼠标悬停在整个a上时才会有效。
它会更改导航下拉菜单中的所有图标，而不仅仅是我正在悬停的图标。
即使我移开光标，效果也会停留在那里，只有当我再次将光标悬停在元素上时，效果才会消失。（也许添加一个mouseout？）
"home"图标没有大纲版本，因此不应受到影响。

我希望这个想法很明确。

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

使用hover()代替mouseover()：

$('nav li').hover(
 (e) => $('i', e.target).toggleClass('outline')
);

上述代码在mouseover和mouseout事件上运行相同的功能。如果要在每个函数上运行不同的函数，请提供mouseout作为第二个参数的函数。否则，mouseover中的mouseout也会在$('i', e.target)上运行。

另外，我仅限于悬停项目：i =＆gt; e.target内的$('nav li').hover( (e) => $('i', e.target).addClass('outline'), (e) => $('i', e.target).removeClass('outline') )元素，这是悬停的元素。看到它在行动：

＆＃13;

.outline {
  border: 1px solid red;
}
i {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  box-sizing: border-box;
  margin-right: .5rem
}
li, ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul {
  display: flex;
  flex-direction: column;
  max-width: 150px;
}
li {
  display: inline-block;
}
li:hover {
  background-color: #f5f5f5;
  display: block;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="smallNav">
  <ul>
    <li><a href="#">
      <i class="icon home"></i>Home
    </a></li>
    <li><a href="#">
      <i class="icon star"></i>Featured
    </a></li>
    <li><a href="#">
      <i class="icon newspaper"></i>News
    </a></li>
    <li><a href="#">
      <i class="icon user"></i>Career
    </a></li>
    <li><a href="#">
      <i class="icon envelope"></i>Contact
    </a></li>
  </ul>
</nav>

＆＃13;

<ul>

＆＃13;

重要：您当前的标记无效。 <li>元素的唯一合法直接子元素是hover(toggleClass)元素。

注意：即使mouseover很短，您也会发现错过mouseout或{{1}有时可能会错过一个或多个元素事件，此时它将开始反转。为了防止这种情况，你应该坚持使用详细的形式：

$('nav li').hover(
  (e) => $('i', e.target).addClass('outline'),
  (e) => $('i', e.target).removeClass('outline')
)

Answer 2

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

编辑：将方法更改为悬停

仅针对特定的孩子的<a>切换课程，并且仅在其没有home课程的情况下才会切换

Answer 3

这可以让你更多控制：

function a(e){
   $(e.target).addClass("outline");
}
function b(e){
   $(e.target).removeClass("outline");
}

$("nav a").on("mouseenter", a);
$("nav a").on("mouseleave", b);

（未经测试）

显然，您可以根据需要调整a / b方法以删除/添加类。

Answer 4

我认为用纯CSS而不是javascript来做这件事会更好。

.icon.home{
     height: 50px;
     width: 50px;
     background-image: url(path_to_image);
     background-repeat: no-repeat;
}

.icon.home:hover{
     background-image: url(path_to_hover_image);
}

使用jQuery更改悬停时的图标

4 个答案: