Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12

Thread: Jquery hover

  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Jquery hover

    Hey, how do I get a jquery hover coded more efficiently than this so that the text also triggers the image hover as well. The way this is set up seems really crummy. heres the link

    dynodealz.com/crum/crum.html

    don't worry about the missing image.

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    looks like you need to put the text into an anchor
    <a>text</a>

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    6
    Thanked 0 Times in 0 Posts
    it doesnt validate if i put heading tags within a link tag

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    I see
    put anchors in the h tags
    <h2><a>text</a></h2>

    edit: that doesn't work
    Last edited by TinyScript; 03-24-2009 at 01:56 AM.

  • #5
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    6
    Thanked 0 Times in 0 Posts
    but i've got 2 sets of h tags. if i put anchors in both then i have to duplicate the same link.

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Quote Originally Posted by wyclef View Post
    it doesnt validate if i put heading tags within a link tag
    Quoted from somewhere on the internet:
    that's not valid HTML -- even if many browsers will recover from the error. The anchor tag is an inline element, and it should not contain a block element such as a div, h1, p and so on.

  • #7
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    6
    Thanked 0 Times in 0 Posts
    ok, any other ideas?

  • #8
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Or you could always change the infoFade function to look like this:

    Code:
    	function infoFade() {	
    		$('.picture a').hover(
    			function () {
    				$(this).find('strong').fadeIn('normal');
    				},
    			function () {
    				$(this).find('strong').fadeOut('normal');
    			}
    		);
    		$('h6').hover(
    			function () {
    				$('.picture a').find('strong').fadeIn('normal');
    			},
    			function () {
    				$('.picture a').find('strong').fadeOut('normal')
    			}
    		)
    		$('h5').hover(
    			function () {
    				$('.picture a').find('strong').fadeIn('normal');
    			},
    			function () {
    				$('.picture a').find('strong').fadeOut('normal')
    			}
    		)
    	}
    Also, you don't need to have that function inside $(document).ready and can safely pull it out, and just leave the call to it in there. Enjoy.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #9
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    And yet another way to go about it is to just assign the hover function to the '.picture' class, instead of '.picture a', which would definitely remove the need to duplicate the code, though you will get hovers even when not over the text, but over the div itself. Or just use .each... like so:

    Code:
    	function infoFade() {	
    		$('.picture div').children().each(function() {
    			$(this).hover(
    				function () {
    					$('.picture a').find('strong').fadeIn('normal');
    					},
    				function () {
    					$('.picture a').find('strong').fadeOut('normal');
    				}
    			)
    		});
    	}
    But eh, whichever floats your boat. Enjoy.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #10
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    6
    Thanked 0 Times in 0 Posts
    those look promising but i wasnt able to get either of those 2 to work...

  • #11
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Quote Originally Posted by wyclef View Post
    those look promising but i wasnt able to get either of those 2 to work...
    Very rarely do I post untested code. In this case, both options were tested with your mark-up. Upload a live version for me to diagnose and we'll see exactly where the problem is.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #12
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    6
    Thanked 0 Times in 0 Posts
    thx. not sure what happened but i restarted by computer and now the code works fine... haha... weird.


  •  

    Posting Permissions

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