Javascript 如何基于当前悬停的元素隐藏和显示元素？

我们需要能够根据当前悬停的元素隐藏和显示元素。我们尝试了以下操作，但它没有添加

是活动的

类，并根据悬停的其他元素将其删除

如何根据当前悬停的元素隐藏和显示元素

目标（基于以下示例）：

将鼠标悬停在

first

下的

some

上时，使用

显示
some链接
处于活动状态

class

当您将鼠标悬停在

first

下的

path

上时，

某些链接不应显示（删除
处于活动状态
类），而
路径链接
应显示（添加
处于活动状态
类）

当前问题：

处于活动状态

更改悬停元素时未删除类

$（函数（）{
$（'li#two'）。悬停（函数（）{
var el_two=$（本）；
var el_id=el_two.attr（'id'）；
var el_link=el_two.attr（'data-at'）；
变量el_sel='#'+el_link+'.+el_id；
var el_parent=el_two.parent（）.parent（）；
el_parent.find（'.is-active'）.removeClass（'is-active'）；
$（el_sel）.addClass（'is-active'）；
});
});
.two{
显示：无；
}
.处于活动状态{
显示：块；
}











一些链接文本
路径链接
另一个

















首先，您的
.find（）
使用了错误的选择器。您有
find（'is-active'）
这是一个元素名称选择器，您需要一个css类选择器ie
。is-active

el_parent.find('.is-active').removeClass('is-active');

注意：对于
removeClass（）
您不使用css选择器，您只使用一个类名，因此在该调用中不需要点

现在，如果您还希望在悬停在元素之外时删除该类，那么您需要为此添加一个事件侦听器，并从那里调用removeClass
.hover（）
使用第二个参数设置此类事件侦听器回调

$('li#two').hover(onHoverCallback,function(){
  //code for finding the right element
  $(el_sel).removeClass('is-active');
})



$（函数（）{
$（'li#two'）。悬停（函数（）{
var el_two=$（本）；
var el_id=el_two.attr（'id'）；
var el_link=el_two.attr（'data-at'）；
变量el_sel='#'+el_link+'.+el_id；
var el_parent=el_two.parent（）.parent（）；
el_parent.find（'.is-active'）.removeClass（'is-active'）；
$（el_sel）.addClass（'is-active'）；
}，函数（）{
var el_two=$（本）；
var el_id=el_two.attr（'id'）；
var el_link=el_two.attr（'data-at'）；
变量el_sel='#'+el_link+'.+el_id；
$（el_sel）.removeClass（“处于活动状态”）；
});
});
.two{
显示：无；
}
.处于活动状态{
显示：块；
}











一些链接文本
路径链接
另一个

















您的数据属性是
位于
的数据，而不是
数据链接
：
el_two.attr（'data-link'）
@PatrickEvans我确实修复了这个输入错误，但是
处于活动状态
类仍然没有从上一个元素中删除。试试看，这很有效。我发现的另一种选择是使用
.toggleClass（）
代替
.add（）