mouseover事件有点问题

Question

我的代码工作正常，但需求发生了变化。

我需要保持最新状态活动类已移除的活动我再次将鼠标移到active<li>

我不擅长JQuery，有人能帮我吗？？

（函数（$）{$（document）.ready（function（））{$（'a.form'）.on（'mouseover'，函数（事件）{event.proventDefault（）；event.stopPropagation（）；$（this）.parent（）.siblings（）.removeClass（'active'）；$（this）.parent（）.toggleClass（'active'）；});});})（jQuery）；

li.active.btncss，.btncss:悬停{颜色：#FFAE00；背景：#ffffff；边框：2px实心；text-decoration：无；}li{display:inline}

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><ul class=“list-inline”><li class=“active”><a href=“#within”id=“within”class=“btncss form”>市内</a></li><li class=“”><a href=“#full”id=“full”class=“btncss form”>全天雇佣</a></li>半日租赁</a></li>城际租赁</a></li></ul>

Answer 1

使用addClass（添加类）而不是toggleClass（切换类）.

.toggleClass（.toggle类）根据类的存在或状态参数的值，从匹配元素集中的每个元素中添加或删除一个或多个类。

.addClass（）将指定的类添加到匹配元素集中的每个元素中。

值得注意的是，此方法不会替换类。它只是添加类，将其附加到可能已分配给元素的任何类。

试试这个：

（函数（$）{$（document）.ready（function（））{$（'a.form'）.on（'mouseover'，函数（事件）{event.proventDefault（）；event.stopPropagation（）；$（this）.parent（）.siblings（）.removeClass（'active'）；$（this）.parent（）.addClass（'active'）；});});})（jQuery）；

li.active.btncss（激活），.btncss：悬停{颜色：#FFAE00；背景：#ffffff；边框：2px实心；text-decoration：无；}李{显示：内联}

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><ul class=“list-inline”><li class=“active”><a href=“#within”id=“within”class=“btncss form”>市内</a></li><li class=“”><a href=“#full”id=“full”class=“btncss form”>全天雇佣</a></li>半日租赁</a></li>城际租赁</a></li></ul>

Answer 2

你的问题有点难理解——你想<li>最初处于活动状态，在上重置为活动状态鼠标移出? 要做到这一点，您需要记录最初活动的内容，并添加鼠标移出处理程序：

（函数（$）{$（document）.ready（function（））{var originally_active=$（'li.active'）；$（'a.form'）.on（'mouseover'，函数（事件）{event.prventDefault（）事件；event.stopPropagation（）；$（this）.parent（）.siblings（）.removeClass（'active'）；$（this）.parent（）.toggleClass（'active'）；});$（'a.form'）.on（'mouseout'，function（）{$（this）.parent（）.removeClass（'active'）；originally_active.toggleClass（'active'）；});});})（jQuery）；

li.active.btncss，.btncss:悬停{颜色：#FFAE00；背景：#ffffff；边框：2px实心；text-decoration：无；}li{display:inline}

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><ul class=“list-inline”><li class=“active”><a href=“#within”id=“within”class=“btncss form”>市内</a></li><li class=“”><a href=“#full”id=“full”class=“btncss form”>全天雇佣</a></li>半日租赁</a></li><li class=“”><a href=“#inter”id=“inter”class=“btncss form”>城际租车</a></li></ul>