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

Question

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

我需要保持最新状态active class再次将鼠标悬停在事件 <li> 处，事件已被删除

我不太擅长 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>

Answer 1

Use addClass instead of toggleClass.

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

.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>