javascript - jQuery/CSS - 整个 Div 可点击，悬停时激活标签悬停状态

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 中，您可以将 block 元素(例如 .wrapper div)包裹在 anchor 内。这是我认为您正在寻找的基本版本:http://jsbin.com/qegesapore/edit?html,css,js,output

我删除了你在那里的 JS，因为我不确定它是否有必要，而且显然需要调整一些样式。

真正实现这一点应该不需要JS。

悬停状态仍然可以按照以下方式应用于图标:

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