Css 当子元素处于悬停状态时，如何将样式应用于父元素？

这是否仅适用于css？我有以下资料：

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

---

当且仅当img处于以下状态时，如何使

.container

具有一个

框阴影

（和其他样式）

：hover

？

否。css中还没有父选择器。你现在必须求助于js。有关更多说明，请阅读

，您可以使用jQuery：

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

这是演示

您可以将

span

替换为另一个标记，例如

img

，正如人们所说的，没有CSS父选择器，原因很多，如链接的重复问题中所述

然而，对于您所展示的代码，您只需将

悬停

伪选择器应用于父元素，它将实现几乎完全相同的功能

因此：

div:hover{
    border:1px solid red
}

只会因为您有一个子对象而起作用，并且如果您将鼠标悬停在

img

附近而不是直接悬停在其上，则父对象仍会应用样式，因为它是块元素

您可以将其转换为

内联块

，以限制此操作，如下所示：

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

---

然而，这将对其他兄弟元素如何流向父元素产生影响。

这篇文章已经有3年历史了……在对任何人进行否决投票之前，请检查您自己的答案。我相信op希望css@agconti不过，我不知道如何使用css来实现。