jQuery/CSS - Whole Div Clickable, on hover activate a tag hover state

Question

I'm trying to make the .wrapper div a clickable link that goes to the a.icon location. Also, when they hover over the .wrapper div the a.icon:hover state actives, not just when you hover over the icon itself.

Any help would be great.

This is what I have so far:

jQuery(document).ready(function($) {
    $(".aca-question-container").hover(function() {
       $(".icon").trigger("hover");
    });
    $(".aca-question-container").click(function(){
       window.location=$(this).find("a").attr("href");
       return false;
    });
});

Example: http://jsbin.com/diyewivima/1/edit?html,css,js,output

Answer 1

In HTML5, you can wrap block elements such as your .wrapper div, within anchors. This is a rudimentary version of what I think you're looking for: http://jsbin.com/qegesapore/edit?html,css,js,output

I removed the JS you had there as I'm not sure it's necessary, and obviously some styling will be needing to be tweaked.

There shouldn't be any requirement for JS to achieve this really.

The hover state can still be applied to the icon as per:

.your-anchor:hover .icon {
  background: #666;
}

Answer 2

As I commented, you can use jQuery and a class to achieve what you want. Below is the JS: (it must be inside the onload function)

$('div#wrapper').mouseenter(function(){
  $('a.icon').addClass('hover');
});
$('div#wrapper').mouseleave(function(){
  $('a.icon').removeClass('hover');
});

And, you must not forget, in your CSS you have to replace a.icon:hover with a.icon:hover, a.icon.hover , so that it emulates the hover state when the class is added. Like this:

a.icon:hover, a.icon.hover{
  //CSS GOES HERE
}

Answer 3

For the CSS portion- propagating the hover is pretty easy. Just use
.wrapper:hover .icon
as the hover effect selector. You can drop .icon:hover, too, since the parent is hovered when the child is hovered.

As for propagating the click down to it... also easy without jQ.

 .wrapper:hover .icon{ color:#f00; } 

 <div class="wrapper" onclick="this.getElementsByClassName('icon')[0].click()"> <a href="google.com" class="icon">icon</a> testit </div> 

The error generated is the "there's not stackoverflow.com/google.com" error, showing that the link was followed. Slap https:// in front of the href and pull it out of an iframe and you'll be able to fully see it works.

EDIT: bsod99's fix is cleaner. So long as you can rearrange the DOM and don't need to support ancient relics (pre-HTML5 spec browsers, like Firefox <3.5) (which you probably don't have to do), use his instead.