www.webdeveloper.com
Results 1 to 5 of 5

Thread: Help with Jquery :hover Selector

  1. #1
    Join Date
    Jan 2009
    Posts
    24

    Help with Jquery :hover Selector

    Hello.

    I have navigation that looks similar to this

    HTML Code:
    <div id="content">
    <h2><a href="/about/" class="about">About <span></span></a></h2>
    <h2><a href="/portfolio/" class="portfolio">Portfolio <span></span></a></h2>
    <h2><a href="/contact/" class="contact">Contact <span></span></a></h2>
    <div>
    And I would like to select the span tag when the parent anchor is hovered over.

    This is the code I currently have, but it only works in certain versions of firefox and I would like it to work in all of the major browers. In the other browsers it will either select all of the anchor tags at the some time, or it will select none of them. I am pretty sure that the problem lies with the :hover selector in jquery.

    Code:
    $(document).ready(function(){
    
    $("#content h2 a").hover(
    	function(){
    		$("#content h2 a:hover span").fadeTo("normal", 0.33);
    	},
    	function(){
    		$("#content h2 a:hover span").fadeTo("normal", 0.00);
    	}
    );
    
    });

  2. #2
    Join Date
    Jun 2009
    Posts
    21

    IDs vs. Classes

    You want to set your like elements to have the same class. So menu items can all be given a class of [for example] "menuLink".

    in your css you can control ".menuLink" properties and those properties will affect all of those items with that class.

    the jQuery selector you would want to use is $(".menuLink", this).hover.....

    the selector grabs an element whose class is menuLink, and 'this' refers to the one that is currently in the hover state. That is the one that will be manipulated by your code.

    these elements should have unique ID's, not unique classes.
    Last edited by robish518; 10-19-2009 at 02:03 PM. Reason: clarifying

  3. #3
    Join Date
    Jan 2009
    Posts
    24
    I wasn't clear enough in my initial post.

    Here is the page I am working on: http://www.patrickrauland.com/ The selectors work just fine in my version of firefox, but they do not work in IE 7, Chrome, Safari, and some versions of firefox.

    When I hover over the anchor tag I want the span within the anchor tag to fade in.

    so the selector for hovering over the anchor tag is pretty easy:
    HTML Code:
    $("#content h2 a").hover
    But I don't know how to specify the span within the hovered anchor tag.

    Thoughts? Why does this only work with Firefox and none of the other browsers?

  4. #4
    Join Date
    Jun 2009
    Posts
    21

    Tested and working

    Sorry it took a while to get back. I've been away from the computer for a while. If you still need a solution try this out...

    This was tested in IE8, FF3, & Safari. Remember, that once you are inside the callback function for that selector, you don't need to reselect it again. Using "this" refers to the item that you have selected that is part of that selector.

    Code:
    $(document).ready(function(){
    $("#content h2 a").hover(
    function(){
    $("span", this).fadeTo("normal", 0.33);
    },
    function(){
    $("span",this).fadeTo("nomal", 0.00);
    });
    });

  5. #5
    Join Date
    Jan 2009
    Posts
    24
    Thanks! That works great.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles