Javascript 悬停，移除类第一个元素并添加其他元素
我试图创建一个函数，使第一个元素总是接收class=actived 这个类有一个css样式来标记所讨论的元素 我有一个4行的列表，其中我希望第一行默认接收这个类，当我悬停receive this class=actived时，另外3行接收这个类 同时从第一个元素中删除类，当我从顶部删除鼠标时，默认情况下第一个元素返回receive class=actived $.news list li.hover 函数{$this.addClass'actived'}， 作用{ $this.removeClass'actived' 如果$this.hasClass=={ $.news list li.first.removeClass'actived' } }, 新闻列表{ 最大宽度：595px； 保证金：0自动； } /*托多斯元素无利中心化托多斯元素无利中心化托多斯元素无利中心化托多斯元素无利中心化托多斯元素无利中心化托多斯元素无利中心化托多斯元素无利中心化托多斯元素*/ .新闻列表李{ 高度：47px； 显示器：flex； 对齐项目：居中； 字体大小：13px； 字号：600； 边框底部：1px实心38353a； 过渡：无； 位置：相对位置； z指数：2； } /*哦，帕萨罗，老鼠，莫斯特*/ .news list li.actived:：before{ 边框：1px实心38353b； 背景色：27242b； 宽度：630px； 高度：50px； 位置：绝对位置； 底部：-1px； 左：-17px； z指数：-1； -webkit盒阴影：0px 20px 20px-19px rgba0,0,0.75； -moz盒阴影：0px20px20px-19pxrgba0,0,0.75； 盒影：0px20px20px-19pxRGBA0,0,0,0.75； 内容：； } /*蒂图洛·林卡维尔·达诺西娅酒店*/ .新闻列表李a{ 颜色：fff； } /*波西西奥南多·博托·勒·梅斯酒店*/ .新闻列表李.总结btn{ 显示器：flex； 柔性生长：3； 证明内容：柔性端； 可见性：隐藏； } /*哦，帕萨啊，老鼠啊，最爱我的是维梅略*/ .新闻列表李：悬停.换行{ 能见度：可见； } - 00 / 00 / 00 - 00 / 00 / 00 - 00 / 00 / 00 - 00 / 00 / 00Javascript 悬停，移除类第一个元素并添加其他元素,javascript,html,css,Javascript,Html,Css,我试图创建一个函数，使第一个元素总是接收class=actived 这个类有一个css样式来标记所讨论的元素 我有一个4行的列表，其中我希望第一行默认接收这个类，当我悬停receive this class=actived时，另外3行接收这个类 同时从第一个元素中删除类，当我从顶部删除鼠标时，默认情况下第一个元素返回receive class=actived $.news list li.hover 函数{$this.addClass'actived'}， 作用{ $this.remove
你只是把悬停功能弄得太复杂了 如果希望最后一个悬停的元素在不再悬停时保持活动状态，则不需要在mouseout事件上发生任何事情-可以从该事件的悬停处理程序中删除第二个函数 要在最后一个悬停的元素上保留高亮显示，请执行以下操作： 在悬停事件上：从它可能所在的所有元素中删除活动类，无需先检查哪个，因为这无关紧要！将其添加到当前悬停的元素中
$(".news-list li").hover(
function() {
$(".news-list li").removeClass('actived')
$(this).addClass('actived')
}
)
$(".news-list li").hover(
function() {
$(".news-list li").removeClass('actived')
$(this).addClass('actived')
},
function() {
$(".news-list li").removeClass('actived')
},
)
$(".news-list li").hover(
function() {
// Remove from all elements and add to the current element
$(".news-list li").removeClass('actived')
$(this).addClass('actived')
},
function() {
// Remove from all elements and add to the first element
$(".news-list li").removeClass('actived')
$(".news-list li").first().addClass('actived')
},
)
通过在CSS选择器中使用：hover，无需任何JavaScript即可完成此操作 新闻列表{ 最大宽度：595px； 保证金：0自动； } /*托多斯元素无利中心化托多斯元素无利中心化托多斯元素无利中心化托多斯元素无利中心化托多斯元素无利中心化托多斯元素无利中心化托多斯元素无利中心化托多斯元素*/ .新闻列表李{ 高度：47px； 显示器：flex； 对齐项目：居中； 字体大小：13px； 字号：600； 边框底部：1px实心38353a； 过渡：无； 位置：相对位置； z指数：2； } /*哦，帕萨罗，老鼠，莫斯特*/ .新闻列表：hover li:hover:：在， .news list:hover li.actived:hover:：before， .news list li.actived:：before{ 边框：1px实心38353b； 背景色：27242b； 宽度：630px； 高度：50px； 位置：绝对位置； 显示：块； 底部：-1px； 左：-17px； z指数：-1； -webkit盒阴影：0px 20px 20px-19px rgba0,0,0.75； -moz盒阴影：0px20px20px-19pxrgba0,0,0.75； 盒影：0px20px20px-19pxRGBA0,0,0,0.75； 内容：； } .news列表：hover li.actived:：before{ 显示：无； } /*蒂图洛·林卡维尔·达诺西娅酒店*/ .新闻列表李a{ 颜色：fff； } /*波西西奥南多·博托·勒·梅斯酒店*/ .新闻列表李.总结btn{ 显示器：flex； 柔性生长：3； 证明内容：柔性端； 可见性：隐藏； } /*哦，帕萨啊，老鼠啊，最爱我的是维梅略*/ .新闻列表李：悬停.换行{ 能见度：可见； } - 00 / 00 / 00 - 00 / 00 / 00 - 00 / 00 / 00 - 00 / 00 / 00
如果$this.hasClass=={事实上，我试图在没有class=actived的情况下将鼠标移到上面，从第一个元素中移除class=actived。哇，这是真的，我累了，我没想对，谢谢，这对我帮助很大。但是，如果将鼠标移到下面的其他元素上，我将如何做到这一点？默认情况下，返回到第一个元素a class=actived？@CauêSiqueira我已经更新了让我的答案包括不同的场景，包括这一个，以及它们如何工作的解释，所以如果你想在将来更改它，你可以从中得到一些示例：列表项在悬停时是处于活动状态，还是只是悬停样式？@SandrinJoy如何使用CSS添加类？是的，只是悬停，你可以看到规则规定取消上课并突出显示悬停的那节课。我被他的问题弄糊涂了，没有其他问题。