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不起作用。

回答

相关问题