Question

我的小提琴：https://jsfiddle.net/atg5m6ym/6471/

我试图创建一个导航栏，当用户在其上悬停时，每个导航链接下方都有活动边框。但我希望当前项目的边界悬停。我想从其他链接中删除该边框。我正在尝试代码，但似乎我的逻辑不起作用。

我的javascript

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

Answer 1

这是你要找的吗？

Updated fiddle

＆＃13;

ul li:hover div {
  height: 1px;
  width: 36px;
  border: 1px solid #fe3434;
  margin-top: 12px;
  margin: 10px auto;
}
ul li{
  list-style-type: none;
  text-align:center;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用CSS代替，并将边框设置为::after元素。然后，您只能在悬停时显示此::after：ul li:hover::after。

::after或::before是目标元素中的伪元素。

这样您就不需要不必要的div。

我更新了你的小提琴：https://jsfiddle.net/atg5m6ym/6475/

Answer 3

你可以使用css：hover，你不需要jQuery：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

这可以帮助您：

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <style>
            .activeItemNav {
                height: 1px;
                width: 36px;
                border: 1px solid #fe3434;
                margin-top: 12px;
                margin: 10px auto;
            }
            ul li{
               text-align:center;
                list-style-type: none;
            }
        </style>
    </head>
    <body>
        <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>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("ul li a ").mouseenter(function(){
                    $("div",this).addClass("activeItemNav");
                }).mouseleave(function(){
                     $("div",this).removeClass("activeItemNav");
                })
            })
        </script>
    </body>
</html>

＆＃13;

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

4 个答案: