javascript - 鼠标悬停事件有点麻烦

我的代码工作正常，但要求有所变化。

我需要保持当前的active class处于活动状态，然后将其再次删除。

我的JQuery不好，所以有人可以帮忙吗？

(function($){
	$(document).ready(function(){
		$('a.form').on('mouseover', function(event) {
			event.preventDefault();
			event.stopPropagation();
			$(this).parent().siblings().removeClass('active');
			$(this).parent().toggleClass('active');
		});
	});
})(jQuery);

li.active .btncss, .btncss:hover {
    color: #FFAE00;
    background: #ffffff;
    border: 2px solid;
    text-decoration: none;
}
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">With In City</a></li>
<li class=""><a href="#full" id="full" class="btncss form">Full Day Hire</a></li>
<li class=""><a href="#half" id="half" class="btncss form">Half Day Hire</a></li>
<li class=""><a href="#inter" id="inter" class="btncss form">InterCity Hire</a></li>
</ul>

最佳答案

使用addClass代替toggleClass。


.toggleClass从匹配元素集中的每个元素中添加或删除一个或多个类，这取决于类的存在或state参数的值。

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

重要的是要注意，此方法不能代替类。它只是添加类，将其附加到可能已经分配给元素的任何类上。

尝试这个：

(function($) {
  $(document).ready(function() {
    $('a.form').on('mouseover', function(event) {
      event.preventDefault();
      event.stopPropagation();
      $(this).parent().siblings().removeClass('active');
      $(this).parent().addClass('active');
    });
  });
})(jQuery);

li.active .btncss,
.btncss:hover {
  color: #FFAE00;
  background: #ffffff;
  border: 2px solid;
  text-decoration: none;
}
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">With In City</a>
  </li>
  <li class=""><a href="#full" id="full" class="btncss form">Full Day Hire</a>
  </li>
  <li class=""><a href="#half" id="half" class="btncss form">Half Day Hire</a>
  </li>
  <li class=""><a href="#inter" id="inter" class="btncss form">InterCity Hire</a>
  </li>
</ul>

关于javascript - 鼠标悬停事件有点麻烦，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35217160/