Question

我试图让.wrapper div成为一个可点击的链接，转到a.icon位置。此外，当它们悬停在.wrapper div上时，a.icon：悬停状态为活动状态，而不仅仅是当您将鼠标悬停在图标本身上时。

任何帮助都会很棒。

这是我到目前为止所做的：

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：也可以悬停，因为当孩子徘徊时父母会徘徊。

至于将点击传播给它......在没有jQ的情况下也很容易。

＆＃13;

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

＆＃13;

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

＆＃13;

生成的错误是＆＃34;没有stackoverflow.com/google.com"错误，显示链接已被遵循。在https://前面轻拍href并将其从iframe中拉出来，您就可以完全看到它有效了。

编辑： bsod99的修复更清洁。只要您可以重新排列DOM并且不需要支持古代遗物（HTML5之前的浏览器，如Firefox＆lt; 3.5）（您可能不必这样做），请使用他的代替。

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

3 个答案: