Results 1 to 3 of 3

Thread: How to trigger a:hover with jQuery

  1. #1
    Join Date
    Feb 2009
    Location
    Victoria, BC, Canada
    Posts
    303
    Thanks
    18
    Thanked 36 Times in 36 Posts

    Default How to trigger a:hover with jQuery

    I've now decided it's about time I learned how to use jQuery...

    I want to know how to trigger an A:HOVER function for a menu. I have the latest jQuery downloaded (1.3.2).

    I know that I have to edit the section highlighted below, but what do I put into it?
    Code:
      <script type="text/javascript">
      $(document).ready(function(){
        
        $(document.body).click(function () {
          $("div:hidden:first").fadeIn("slow");
        });
    
      });
      </script>
    My menu is this:
    Code:
    <div class="menu">
    	<ul class="nav">
    		<li><a href="/">Web</a></li>
    		<li><a href="images/">Images</a></li>
    		<li><a href="maps/">Maps</a></li>
    		<li><a href="news/">News</a></li>
    		<li><a href="video/">Video</a></li>
    		<li><a href="gmail/">Gmail</a></li>
    	</ul>
    </div>
    Yes, I'm trying to recreate Google...

    Any help or tips would be appreciated.

    // X96 \\
    Alex Blackie, X96 Design
    My Website
    I specialize in: HTML5, CSS3, PHP, Ruby on Rails, MySQL, MongoDB, Linux Server Administration

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    It's just like a css selector, try .menu .nav li a or .menu .nav li. I don't know which your trying to get to (listed both ways I would think you are).
    Jeremy | jfein.net

  3. #3
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Quote Originally Posted by X96 Web Design View Post
    I want to know how to trigger an A:HOVER function for a menu.
    Try this:
    HTML Code:
    <script type="text/javascript">
    $(function(){
        $('.nav a').hover(function(){
            $(this).css({'color':'red','background':'#ddd'});
        },function(){
            $(this).css({'color':'blue','background':'#fff'});
        });
    });
    </script>
    I would recommend these nice tutorials: http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •