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）（您可能不必這樣做），請改用他的。