jQuery / CSS-Whole Div Clickable，悬停时激活标签悬停状态

Question

我正在尝试使.wrapper div成为可链接到a.icon的位置。 此外，当它们将鼠标悬停在.wrapper div上时，a.icon：hover状态将处于活动状态，而不仅仅是将鼠标悬停在图标本身上。

任何帮助都会很棒。

这是我到目前为止的内容：

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;
    });
});

示例： http ： //jsbin.com/diyewivima/1/edit？html，css，js，output

Answer 1

在HTML5中，您可以在锚点中包装诸如.wrapper div之类的块元素。 这是我想寻找的基本版本： http : //jsbin.com/qegesapore/edit?html,css,js,output

我删除了那里的JS，因为我不确定这是没有必要的，并且显然需要调整一些样式。

JS完全不需要达到此目的。

仍可以按照以下方式将鼠标悬停状态应用于图标：

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

Answer 2

正如我评论的那样，您可以使用jQuery和一个类来实现所需的功能。 下面是JS ：（必须在onload函数内部）

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

并且，请不要忘记，在CSS中，您必须将a.icon:hover替换为a.icon:hover, a.icon.hover ，以便在添加类时可以模拟悬停状态。 像这样：

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

Answer 3

对于CSS部分，将鼠标悬停很容易。 只需使用
.wrapper:hover .icon
作为悬停效果选择器。 您也可以删除.icon：hover，因为悬停了孩子时，父母也已经悬停了。

至于传播点击到它...没有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> 

生成的错误是“没有stackoverflow.com/google.com”错误，表明已遵循链接。 在href前面加上https://并将其拉出iframe ，您将可以完全看到它的工作原理。

编辑：bsod99的修复程序更干净。 只要您可以重新排列DOM，并且不需要支持古老的文物（HTML5规范以前的浏览器，例如Firefox <3.5）（您可能不必这样做），请改用他的。