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,
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.
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.