Question

这只能用css吗？我有以下内容：

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

当且仅当img处于.container状态时，如何让box-shadow拥有:hover（以及其他样式）？

Answer 1

由于人们已经声明没有CSS父选择器，原因很多，如链接的重复问题中所述。

但是，使用您显示的代码，您可以将hover伪选择器应用于您的父元素，它将实现几乎完全相同的功能。

所以这个：

div:hover{
    border:1px solid red
}

只会，因为您只有一个孩子，如果您将鼠标悬停在img附近而不是直接在其上，则会出现问题parent仍将应用样式，因为它是一个块元素。

您可以将其转换为inline-block以限制此值，如下所示：

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

但是，这将影响父流的其他兄弟元素如何流动。

Answer 2

你可以使用jQuery：

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

以下是演示http://jsfiddle.net/Sv6Av/

您可以将span替换为其他标记，例如img

Answer 3

不。 css中没有父选择器。你现在必须诉诸于js。有关详细说明，请阅读 this

当孩子在盘旋时，如何将样式应用于父元素？

3 个答案: