如何激活使用jQuery

當前導航鏈接

我的小提琴：https://jsfiddle.net/atg5m6ym/6471/如何激活使用jQuery

我試圖創建下面的每個導航鏈接的活動邊框導航欄，當用戶將鼠標懸停在其上。但我想要在當前項目被徘徊的邊界。我想從其他鏈接中刪除該邊框。我正在嘗試代碼，但似乎我的邏輯不起作用。

我的javascript

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

來源

2016-06-26 Daniel

您是否必須爲此簡單任務使用jQuery？ CSS就夠了。 – makshh

您可以使用CSS：懸停，你並不需要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"> 
 
\t \t   <li> 
 
\t \t   \t <a href="#"> 
 
\t \t   \t \t HOME 
 
\t \t   \t \t <div></div> 
 
\t \t   \t </a> 
 
\t \t   </li> 
 
\t \t   <li> 
 
\t \t   \t <a href="#"> 
 
\t \t   \t \t ABOUT 
 
\t \t   \t \t <div></div> 
 
\t \t   \t </a> 
 
\t \t   </li> 
 
\t \t   <li> 
 
\t \t   \t <a href="#"> 
 
\t \t   \t \t TEAM 
 
\t \t   \t \t <div></div> 
 
\t \t   \t </a> 
 
\t \t   </li> 
 
\t \t   <li> 
 
\t \t   \t <a href="#"> 
 
\t \t   \t \t SERVICES 
 
\t \t   \t \t <div></div> 
 
\t \t   \t </a> 
 
\t \t   </li> 
 
\t \t   <li> 
 
\t \t   \t <a href="#"> 
 
\t \t   \t \t PORTFOLIO 
 
\t \t   \t \t <div></div> 
 
\t \t   \t </a> 
 
\t \t   </li> 
 
\t \t   <li> 
 
\t \t   \t <a href="#"> 
 
\t \t   \t \t CONTACT 
 
\t \t   \t \t <div></div> 
 
\t \t   \t </a> 
 
\t \t   </li> 
 
\t \t  </ul>

來源

2016-06-26 22:06:35 Kld

這是你找什麼？

Updated fiddle

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

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

來源

2016-06-26 22:05:14 LGSon

你可以做到這一點使用CSS來代替，並設置邊框爲::after元素。然後，您只能在懸停時顯示此::after，因此：ul li:hover::after。

::after或::before是目標元素中的僞元素。

這樣你就不需要不必要的div。

我已經更新您的提琴：https://jsfiddle.net/atg5m6ym/6475/

來源

2016-06-26 22:05:19

這幫助你：

<!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"> 
 
\t \t   <li><a href="#">HOME<div></div></a></li> 
 
\t \t   <li><a href="#">ABOUT<div></div></a></li> 
 
\t \t   <li><a href="#">TEAM<div></div></a></li> 
 
\t \t   <li><a href="#">SERVICES<div></div></a></li> 
 
\t \t   <li><a href="#">PORTFOLIO<div></div></a></li> 
 
\t \t   <li><a href="#">CONTACT<div></div></a></li> 
 
\t \t  </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>

來源

2016-06-26 22:25:35 Ehsan

@Daniel，試試我的代碼！ – Ehsan

如何激活使用jQuery

回答

相關問題