Question

I have a clickable div and within that div is link. When the link is hovered the text changes via css a:hover. For some reason I can seem to figure out to apply that hover to the whole div. Here is my code.

JQuery for making the div clickable:

$("div.clickable").click(
function()
{
    window.location = $(this).attr("url");
    return false;
});

HTML

<div class="clickable" url="/galleries/Current_exhibits.aspx">
<p><a href="URL">TEST</a></p>
</div>

I’d like to add a simple a:hover {color: #000;} effect to the whole div but am having trouble. Any pointers?

Answer 1

Just apply :hover to the div:

.clickable:hover,
.clickable:hover a:link
{
    color: #000;
}

I applied it to the link as well, as you’ll likely have to do.

http://jsfiddle.net/M3fw2/