Anchor: Not active when div is displayed

[Venom Rush]

Hi all

I'm having an issue in every developer's favourite browser, IE.
I have an anchor tag wrapped around two divs. The first div contains a transparent png and the aforementioned div is hidden using 'display:none;'

When the anchor is moused over the div is shown with jquery's hoverintent. However, in IE, when this action happens the link becomes inactive in the area where the hidden div is displayed.

I can't figure out how to get around this problem. I hope someone here has a solution. My code is below.

HTML

<a class="link">
<div style="display:none;" id="overlay_white">overlay image goes here</div>
<div class="imageHolder">news image goes here</div>
</a>

CSS

.link {
	font-size:12px;
	font-weight:bold;
	color:#666666;
	text-decoration:none;
	text-align:center;
	cursor:pointer;
}
.link:hover {
	text-decoration:underline;
}
.imageHolder {
	width:236px;
	height:236px;
	background-color:#EBEBEB;
	text-align:left;
}
#overlay_white {
	float:left;
	position:absolute;
	margin:0;
	padding:0;
}

[tanoru]

Please include ALL relevant code. How can people provide a solution when the code you've given doesn't do anything?

[almostbob]

How can people provide a solution when the code you've given doesn't do anything?

like this

Venom, this may provide the solution without js BS

.link { font-size:12px; font-weight:bold; color:#666666; text-decoration:none; text-align:center; cursor:pointer; }
.link:hover { text-decoration:underline; }
.imageHolder { width:236px; height:236px; background-color:#EBEBEB; text-align:left; }
#overlay_white { display:none; float:left; position:absolute; margin:0; padding:0;}
#overlay_white:hover { display:block; float:left; position:absolute; margin:0; padding:0;}

<a class="link">
<div id="overlay_white">overlay image goes here</div>
<div class="imageHolder">news image goes here</div>
</a>

if sisplay:block; fails display:inline; will work, its been a long time since I had to set up any new css, I get messed about with which works where

[Venom Rush]

Please include ALL relevant code. How can people provide a solution when the code you've given doesn't do anything?

As requested, the jquery code. I didn't supply the code because it has no relevance. This is a html/css issue. Not Jquery.

function buttonHoverOver(){ //On hover...
	$(this).find("#overlay_white").stop().show();		
}
	
function buttonHoverOut(){ //on hover out...	
	//Animate the image to 0 opacity (fade it out)
	$(this).find("#overlay_white").stop().hide() //Hide the image after fade
}
	
//Set custom HoverIntent configurations
var buttonConfig = {
	 sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
	 interval: 0, // number = milliseconds for onMouseOver polling interval
	 over: buttonHoverOver, // function = onMouseOver callback (REQUIRED)
	 timeout: 0, // number = milliseconds delay before onMouseOut
	 out: buttonHoverOut // function = onMouseOut callback (REQUIRED)
};
	
$(".link").hoverIntent(buttonConfig); //Trigger Hover intent with custom configurations

Note that IE handles transparent png's horribly which is why I'm simply doing a show/hide of #overlay_white.

[Venom Rush]

like this

Venom, this may provide the solution without js BS

.link { font-size:12px; font-weight:bold; color:#666666; text-decoration:none; text-align:center; cursor:pointer; }
.link:hover { text-decoration:underline; }
.imageHolder { width:236px; height:236px; background-color:#EBEBEB; text-align:left; }
#overlay_white { display:none; float:left; position:absolute; margin:0; padding:0;}
#overlay_white:hover { display:block; float:left; position:absolute; margin:0; padding:0;}

<a class="link">
<div id="overlay_white">overlay image goes here</div>
<div class="imageHolder">news image goes here</div>
</a>

if display:block; fails display:inline; will work, its been a long time since I had to set up any new css, I get messed about with which works where

Thanks almostbob. I'll give this a try and let you know if it works out.

[Venom Rush]

So I solved my problem by doing the following:

<a class="link" style="position:absolute; z-index:50;">1x1 transparent gif with a width and height of the the news image</a>
<div style="position:absolute; z-index:0; display:none;" id="overlay_white">overlay image goes here</div>
<div class="imageHolder">news image goes here</div>

As you can see the anchor tag no longer wraps around the divs and it now has a z-index of 50