javascript help -- $(".photo-list a").hover(function()

Hi all, I have a pretty straight-forward script that is causing me fits. As you can see in the attached example it works fine on the first three rollover boxes, but if I add a link in the popup box (like the fourth one) the whole thing breaks. I tried putting a class on the A href, but couldn't get it to work.

Help!
test.zip
tekgrlAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ZylochCommented:
Your problem occurs because you have a link inside of a link. To fix this, you will need to wrap the contents of your rollover and promos not inside of an <a> tag but inside of a <div> tag. For example, check out the following modified script.

<html>
<head>
<title></title>
<meta name="keywords" content="javascript, css, php, tutorial, web 2.0" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>
<script type='text/javascript'>
$(function(){
	$(".photo-list li > div").hover(function(){
		$(this).children("div.promo").fadeOut();
	}, function(){
		$(this).children("div.promo").fadeIn();
	})		
});
</script>
<!--[If IE]>
<style type='text/css'>
*{ behavior: url("images/iepngfix.htc") }
</style>
<![EndIF]-->
<style type='text/css'>
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

body {
font-size:12px; /* gives us a base of 12px */
font-family:Arial, Helvetica, sans-serif;
}

a, a:visited {
outline:none;
color:#FFFFFF;
text-decoration:none;
}
a img {
border:none;
}

.clear {
clear:both;
}

#wrapper {
	width:480px;
	margin:auto;
}

ul.photo-list {
	list-style:none;
}

ul.photo-list li {
	width:240px;
	float:left;
	margin:0px;
}

ul.photo-list li > div {
	display:block;
	height:142px;
	weight:240px;
	position:relative;
}



ul.photo-list li > div div {
	position:absolute;
}

ul.photo-list li div.promo {
	/* background:url("images/span-bg.png") no-repeat center center; */
	display:block;
	height: 132px;
	width: 230px;
	position:absolute;
	z-index:2;
	background-image:url(images/corner.gif);
	background-position:bottom right;
	background-repeat:no-repeat;
	border:5px solid #fff;
}




.rollover h1, .promo h1 {
font-size:16px;
font-weight:normal;
letter-spacing:0.12em;
display:block;
height:22px;
width:200px;
background-color:#ee2200;
padding:5px 0 0 6px;

}

.rollover {
width:240px; 
height:142px; 
background:#ee2200;
background-image:url(images/shadow.gif);
background-position:bottom right;
background-repeat:no-repeat;
}
 
.rollover h1 {
margin:7px 0 0 5px;
}

/* this is the style wiht just the corner gif
.rollover {
width:240px; 
height:142px; 
background:#ee2200;
background-image:url(images/corner-fold.gif);
background-position:bottom right;
background-repeat:no-repeat;
}
 */

.rollover p {
font-size:12px;
font-weight: normal;
padding: 4px 8px 0 8px;
margin: 0 0 0 5px;
}

</style>
</head>
<body>
<div id='wrapper'>
<ul class='photo-list'>
	<li>
<div>
			<div class="rollover"><h1>Business Development</h1>
            	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt.</p>
            </div>
			<div class="promo"><img src='images/photos/promoA.jpg' height="104" width="230"/><h1>Business Development</h1></div>
</div>
	</li>
    <li>

<div>
			<div class="rollover"><h1>Insights</h1>
            	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam.</p>
            </div>
			<div class="promo"><img src='images/photos/promoB.jpg' height="104" width="230"/><h1>Insights</h1></div>
</div>
	</li>
    <li>

<div>
			<div class="rollover"><h1>Events</h1>
            	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam.</p>
            </div>
			<div class="promo"><img src='images/photos/promoC.jpg' height="104" width="230"/><h1>Events</h1></div>
</div>
	</li>
    <li>

<div>
			<div class="rollover"><h1>DC View</h1>
            	<p><a href="#">This link is messing it up</a></p>
            </div>
		
            	<div class="promo"><img src='images/photos/promoD.jpg' height="104" width="230"/><h1>DC View</h1></div>
</div>
	</li>
	
</ul>


</div>
</body>
</noscript>

</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
tekgrlAuthor Commented:
Yes!!!!
0
tekgrlAuthor Commented:
Fabulous. Thanks for adjusting and posting the code -- so helpful!
0
tekgrlAuthor Commented:
Actually... This breaks in IE...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.