如何在兒童懸停時將樣式應用於父元素？

Question

這隻能用CSS嗎？我有以下幾點：

<div class="container"> 
     <img src=#> 
</div> 

我怎麼.container有box-shadow（和其他造型）只有當的img時，是在該州:hover？

Answer 1

沒有。在CSS中沒有父選擇器。你現在不得不求助於js。有關詳細說明閱讀this

Answer 2

您可以使用jQuery：

$("span").hover(
    function() { 
    $(this).parent().addClass("add-class"); 
    }, 
    function() { 
    $(this).parent().removeClass("add-class"); 
    } 
); 

這裏是演示http://jsfiddle.net/Sv6Av/

您可以爲img

Answer 3

另一個標籤等替代span正如人們已經指出沒有CSS父母選擇器，對於很多好的原因如相關重複問題所述。

但是，通過您顯示的代碼，您可以將hover僞選擇器應用到您的父元素，它將實現幾乎的完全相同的功能。

所以這樣的：

div:hover{ 
    border:1px solid red 
} 

會工作只有因爲你有一個孩子，並且將有問題，如果你懸停毗鄰img但不直接在其上的父母仍然會應用了樣式，因爲它是一個塊元素。

你可以將其轉換爲inline-block限制這個，像這樣：

div{ 
    display:inline-block; 
} 
div:hover{ 
    border:1px solid red; 
} 

然而，這將有如何的其他兄弟元素父流的影響。