Stop IE text hover priority

JavaScript
1

The problem.

I’m using jQuery to create a hover effect when a user hovers over a div.
This is fine, as usual all browsers except IE do what I need of them.

Inside my divs I have some text and to get the whole div area to be the link I have simply placed an anchor (last in the div in html) and abs pos’d it, given it a z-index and displayed it as block so that it is now the whole div as a link.

But because of the text, IE is giving priority to the text (unhelpfully trying to be helpful) so when I hover the div, if I hover into the text area it is taking the hovered stated off of the div.

I’m not really sure how better to explain this. but I need to stop IE bringing the text to the front.

I’ve searched but not found a solution, probably because I’m not sure what I’m looking for.

Any help, or a point in the right direction would be really helpful and appreciated,

Thanks

[EDIT]
This happens in all versions of IE inc 9

2

I know exactly what you mean. It’s a long time since I tried this idea (opted not to use it) but I think, if I recall correctly, that it’s as easy as adding a colour for hover on each text element (p, h*, etc.) in the div and setting the cursor to pointer for each element. That should probably give you the seamless appearance that you want, at least in more recent versions of IE.

3

Unfortunatly i cant use a bg color because the hover area is slightly transparent over another image and also unfortunatly it’s not the cursor changing that’s the problem, I’m using jquery fades and because IE is registering the hover twice, it sort of flickers if I hover between the text and the container.

Thanks for the reply though.

4

I didn’t mention anything about a background colour. I meant your link hover colour.

But if you are using jQuery already, why don’t you use biggerlink and fix your problem that way?

5

That seemed to do something but not quite fixed it completly, thanks though I’ll see if I can get this to work.

6

Can you provide a link to an example of your page? Perhaps I or someone else can see why it’s not quite there yet.

7

Usually you can just give IE a fake background image and that’s enough to stop the effect you see.

.test a:hover{background:url(fake.gif) no-repeat -1px -1px}

Or use 1px x 1px fully transparent gif if you don’t want missing images in your server log.

You might be interested in this old quiz (no 2) which shows similar solutions.