Jquery hover

[wyclef]

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.

[TinyScript]

looks like you need to put the text into an anchor
<a>text</a>

[wyclef]

it doesnt validate if i put heading tags within a link tag

[TinyScript]

I see
put anchors in the h tags
<h2><a>text</a></h2>

edit: that doesn't work

[wyclef]

but i've got 2 sets of h tags. if i put anchors in both then i have to duplicate the same link.

[TinyScript]

Originally Posted by wyclef

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.

[wyclef]

ok, any other ideas?

[Eldarrion]

Or you could always change the infoFade function to look like this:

	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.

[Eldarrion]

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:

	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.

[wyclef]

those look promising but i wasnt able to get either of those 2 to work...

[Eldarrion]

Originally Posted by wyclef

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.

[wyclef]

thx. not sure what happened but i restarted by computer and now the code works fine... haha... weird.