Results 1 to 3 of 3

Thread: How to trigger a:hover with jQuery

  1. #1
    Join Date
    Feb 2009
    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!

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
  •