Javascript 使用jQuery更改悬停时的图标

我正在尝试使用jQuery在

鼠标上方更改图标。使用语义UI，如果将
“大纲”
作为类添加，则某些/大多数图标可能会有所不同。例如：
和

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

由于选择了
nav
内的
a
，如果将鼠标悬停在
li
内
a
上，该功能将再次运行。仅当您将鼠标悬停在整个
a
上时，它才有效

它会更改导航下拉列表中的所有图标，而不仅仅是我所停留的图标

即使我将光标移开，效果也会保持不变，并且只在我再次将光标悬停在元素上时才会消失。（可能会添加一个
mouseout
？）

“主页”
图标没有大纲版本，因此不应受到影响

我希望这个想法是清楚的


HTML

使用而不是
mouseover（）
：

$（'nav li'）。悬停(
（e） =>$（'i'，e.target）.toggleClass（'outline'））
);

上述代码在
mouseover
和
mouseout
事件上运行相同的函数。如果要在每个上运行不同的函数，请为
mouseout
提供一个作为第二个参数。否则，
mouseover
中的一个也会在
mouseout
上运行

此外，我仅将其限制为悬停项：
$（'I'，e.target）
=>
I
元素中的
e.target
，即悬停元素。在行动中看到它：


$（'nav li'）。悬停(
（e） =>$（'i'，e.target）.addClass（'outline'），
（e） =>$（'i'，e.target）.removeClass（'outline'）
)
.outline{
边框：1px纯红；
}
我{
宽度：1em；
高度：1公厘；
显示：内联块；
框大小：边框框；
保证金权利：.5rem
}
李，ul{
列表样式类型：无；
保证金：0；
填充：0；
}
保险商实验室{
显示器：flex；
弯曲方向：立柱；
最大宽度：150px；
}
李{
显示：内联块；
}
李：悬停{
背景色：#F5；
显示：块；
光标：指针；
}








使用而不是
mouseover（）
：

$（'nav li'）。悬停(
（e） =>$（'i'，e.target）.toggleClass（'outline'））
);

上述代码在
mouseover
和
mouseout
事件上运行相同的函数。如果要在每个上运行不同的函数，请为
mouseout
提供一个作为第二个参数。否则，
mouseover
中的一个也会在
mouseout
上运行

此外，我仅将其限制为悬停项：
$（'I'，e.target）
=>
I
元素中的
e.target
，即悬停元素。在行动中看到它：


$（'nav li'）。悬停(
（e） =>$（'i'，e.target）.addClass（'outline'），
（e） =>$（'i'，e.target）.removeClass（'outline'）
)
.outline{
边框：1px纯红；
}
我{
宽度：1em；
高度：1公厘；
显示：内联块；
框大小：边框框；
保证金权利：.5rem
}
李，ul{
列表样式类型：无；
保证金：0；
填充：0；
}
保险商实验室{
显示器：flex；
弯曲方向：立柱；
最大宽度：150px；
}
李{
显示：内联块；
}
李：悬停{
背景色：#F5；
显示：块；
光标：指针；
}








这会让你有更多的控制权：

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方法以删除/添加类。
这可以给您更多的控制：

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

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

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

（未测试）

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

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

编辑：将方法更改为悬停

它仅为该特定
的子类
切换类，并且仅当它没有
主类时切换类

编辑：将方法更改为悬停

它只为特定
的子类
切换类，并且只有在它没有
主类的情况下，我认为最好使用纯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);
}

我认为你最好用纯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);
}

@塔普拉，你能说得更具体些吗？使用什么形式的原因之一？通过尽可能提供一个DOM元素作为第二个参数来限制jQuery选择器被认为是非常好的做法，并且如果一致地这样做，将极大地提高页面性能，因为jQuery不需要为每个元素解析整个DOM。您的第二个方法进行了一些修改：
$（'nav a'）。hover（（e）=>$（'i'，e.target）.removeClass（'outline'），（e）=>$（'i'，e.target）.addClass（'outline'））
但这仍然会选择home图标，它没有大纲版本。不过，您的解释让我更了解它，谢谢！@Taplar，您能更具体一点吗？使用什么形式的原因之一？尽可能通过提供DOM元素作为第二个参数来限制jQuery选择器被认为是非常好的选择如果一直这样做，则会大大提高页面性能，因为jQuery不需要为每个元素解析整个DOM。您的第二个方法进行了一些修改：
$（'nava'）。hover（（e）=>$（'i'，e.target）。removeClass（'outline'），（e）=>$（'i'，e.target）。addClass（'outline'））
但这仍然会选择没有大纲版本的主图标。不过，您的解释让我对它有了更多的了解，谢谢！这是迄今为止最干净的方法，并且考虑到主图标没有大纲版本，非常感谢！这是迄今为止最干净的方法，并且考虑到了主ic关于没有大纲的版本，非常感谢！我玩了aroun