JQuery mouseenter和mouseleave css不起作用。

試圖製作一個擴大的導航欄。是否用CSS，但沒有阻止它在點擊新頁面後重置。修復它，使用Jquery。用鼠標輸入和mouseleave來嘗試並做到這一點。使用警報時，它工作正常，但在嘗試應用css時，它無法正常工作。JQuery mouseenter和mouseleave css不起作用。

jQuery的

   $(function(){ 
       $("nav").mouseenter(function(){ 
        .css({"width": "200px", "overflow": "visible"}); 
       }); 

       $("nav").mouseleave(function(){ 
        .css({"width": "60px", "overflow": "hidden"}); 
       }); 
      });

的HTML

<body> 

    <div class="container"> 
     <header> 
      <h1>Chemistry Home</h1> 
     </header> 


     <nav> 
      <div id="logo"> 
       <img src="Images/Logo.png" > 
      </div>     

      <ul> 
       <li> 
        <a href="Index.HTML"> 
         <i class="fa fa-HOME fa-2x" id="on"></i> <!--this is using the font awesome icons, reffered to in the head. Multiple divs are used as the websote declared it should be done. Purely used for the icons --> 
         <span class="nav-text" id="on"> 
          HOME 
         </span> 
        </a>      
       </li> 
       <li> 
        <a href="standards_&_info.HTML"> 
         <i class="fa fa-info fa-2x"></i> 
         <span class="nav-text"> 
          STANDARDS & INFORMATION 
         </span> 
        </a> 
       </li> 
       <li> 
        <a href="interesting_info.HTML"> 
         <i class="fa fa-magic fa-2x"></i> 
         <span class="nav-text"> 
          INTERESTING INFORMATION 
         </span> 
        </a> 
       </li> 
       <li> 
        <a href="JOBS.HTML"> 
         <i class="fa fa-briefcase fa-2x"></i> 
         <span class="nav-text"> 
          JOBS 
         </span> 
        </a> 

       </li> 

       <li> 
        <a href="photo_&_video.HTML"> 
         <i class="fa fa-picture-o fa-2x"></i> 
         <span class="nav-text"> 
          PHOTOS & VIDEOS 
         </span> 
        </a> 

       </li> 
      </ul> 
     </nav> 

     <div id="cover"> 

     </div> 
     <div class="content"> 
      <div class="two-box"> 
       <div class="title"> 
        <h2>Why</h2> 
       </div> 

       <div class="info"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus velit ut nunc pellentesque, sed pretium neque tristique. Nunc pellentesque eros at rhoncus consectetur. Cras ornare nibh vitae justo hendrerit, nec congue metus vulputate. Integer in odio purus. Maecenas et elementum urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus velit ut nunc pellentesque, sed pretium neque tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus velit ut nunc pellentesque, sed pretium neque tristique. Nunc pellentesque eros at rhoncus consectetur.Nunc pellentesque eros at rhoncus consectetur.Aliquam nec nisi sit amet ligula bibendum dignissim eget eu ex. Praesent ut ex semper, cursus lorem in, maximus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sed venenatis nisl, quis pretium tortor. Sed lacinia eu leo quis mollis. Pellentesque ut nulla commodo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sed venenatis nisl, quis pretium tortor. Sed lacinia eu leo quis mollis. Pellentesque ut nulla commodo lorem blandit accumsan sed ac ante. Curabitur scelerisque nec metus rutrum scelerisque. Aliquam a sodales magna. lorem blandit accumsan sed ac ante. Curabitur scelerisque nec metus rutrum scelerisque. Aliquam a sodales magna. Fusce nec sem sem. Praesent eget justo sed ante volutpat malesuada ullamcorper eget eros. Phasellus sodales nisl enim, id tincidunt ligula ultricies sit amet.</p> 
       </div> 

      </div> 

      <div class="two-box"> 
       <div class="title"> 
        <h2>Quotes</h2> 
       </div> 

       <div class="info"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus velit ut nunc pellentesque, sed pretium neque tristique. Nunc pellentesque eros at rhoncus consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus velit ut nunc pellentesque, sed pretium neque tristique. Nunc pellentesque eros at rhoncus consectetur.Cras ornare nibh vitae justo hendrerit, nec congue metus vulputate. Integer in odio purus. Maecenas et elementum urna. Aliquam nec nisi sit amet ligula bibendum dignissim eget eu ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus velit ut nunc pellentesque, sed pretium neque tristique. Nunc pellentesque eros at rhoncus consectetur.Praesent ut ex semper, cursus lorem in, maximus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sed venenatis nisl, quis pretium tortor. Sed lacinia eu leo quis mollis. Pellentesque ut nulla commodo lorem blandit accumsan sed ac ante. Curabitur scelerisque nec metus rutrum scelerisque. Aliquam a sodales magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sed venenatis nisl, quis pretium tortor. Sed lacinia eu leo quis mollis. Pellentesque ut nulla commodo lorem blandit accumsan sed ac ante. Curabitur scelerisque nec metus rutrum scelerisque. Aliquam a sodales magna. Fusce nec sem sem. Praesent eget justo sed ante volutpat malesuada ullamcorper eget eros. Phasellus sodales nisl enim, id tincidunt ligula ultricies sit amet.</p> 
       </div> 

      </div>    

     </div> 


     <footer> 
      rueregrewghe 
     </footer> 
    </div>   
</body>

The JSFiddle

這可能是可能的，它的一個新手的錯誤，我以前沒有使用JQuery的，所以如果你能幫助無論如何，它將不勝感激。謝謝！

來源

2015-09-11 Blodhgarm

的CSS是沒有有效的獨立表達。你必須使用$（this）.css。你的CSS是不正確的，你的小提琴沒有包括jQuery的...

  $(function(){ 
       $("nav").mouseenter(function(){ 
        $(this).css({"width": "200px", "overflow": "visible"}); 
       }); 

       $("nav").mouseleave(function(){ 
        $(this).css({"width": "60px", "overflow": "hidden"}); 
       }); 
      });

修正版本：http://jsfiddle.net/h8nro6s3/2/

來源

2015-09-11 23:48:36

我確實使用css而不是簡單的jQuery。你總是可以使用：懸停這樣的東西。看一看。

nav:hover { 
    width:200px; 
    overflow:visible; 
    transition:ease 1s; 
}

JSfiddle Working

來源

2015-09-11 23:45:11

JQuery mouseenter和mouseleave css不起作用。

回答

相關問題