javascript - 如何使用 jQuery 激活当前导航链接

Question

我的 fiddle :https://jsfiddle.net/atg5m6ym/6471/

我试图创建一个导航栏，当用户悬停在它上面时，每个导航链接下方都有事件边框。但我想要悬停在当前元素上的边框。我想从其他链接中删除该边框。我正在尝试代码，但我的逻辑似乎不起作用。

我的javascript

 $('ul > li > a').mouseenter(function(){
  $(this).find('div').addClass('activeItemNav').siblings('div').removeClass('activeItemNav');
 });

Answer 1

您可以使用 css :hover，为此您不需要 jQuery:

 
ul li{
   text-align:center;
}

a:hover > div{
   height: 1px;
    width: 36px;
    border: 1px solid #fe3434;
    margin-top: 12px;
    margin: 10px auto;
}

<ul class="nav navbar-nav navbar-right">
		        <li>
		        	<a href="#">
		        		HOME
		        		<div></div>
		        	</a>
		        </li>
		        <li>
		        	<a href="#">
		        		ABOUT
		        		<div></div>
		        	</a>
		        </li>
		        <li>
		        	<a href="#">
		        		TEAM
		        		<div></div>
		        	</a>
		        </li>
		        <li>
		        	<a href="#">
		        		SERVICES
		        		<div></div>
		        	</a>
		        </li>
		        <li>
		        	<a href="#">
		        		PORTFOLIO
		        		<div></div>
		        	</a>
		        </li>
		        <li>
		        	<a href="#">
		        		CONTACT
		        		<div></div>
		        	</a>
		        </li>
		      </ul>