我如何只在CSS中定位：hovered元素及其父元素？

Question

所以我有嵌套的div。当我将鼠标悬停在div上时，我希望该div和没有其他div 获得box-shadow。不幸的是，:hover ed div的父母也box-shadow因为他们有相同的签名。我无法改变这一点，因为他们来自无限嵌套模板。

我以为我只需定位:hover box-shadow编辑box-shadow的所有列表项，然后定位其父母以阻止他们表达ul:hover{ box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12); } <some statement..?>{ box-shadow: none; } 但我无法＆{ ＃39;弄清楚如何在CSS中表达：

{{1}}

编辑： This is a JSFiddle of my thing

Answer 1

您可以通过为元素指定ID来执行此操作：

<style type="text/css">
div[id='child']:hover{
background-color:purple;
}

</style>

<div id='parent'>

Hello<br>
<div id='child'>hi<div>

</div>

jsfiddle example

Answer 2

您没有选择正确的元素。使用：

span:hover {
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12);
}

小提琴：http://jsfiddle.net/vy3g5e64/1/

Answer 3

如果您的嵌套模板无法修改其结构，则可以始终使用css特异性来覆盖悬停时的视觉效果（添加框阴影）。

我看到你有ul:hover { box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12); }

你想避免它适用于所有的李，对吧？

你应该应用于每个单独的li而不是ul，如果你需要覆盖一些属性而不能修改html中添加id或类的结构，你可以使用特异性覆盖一些属性。

例如，如果要覆盖

 ul:hover{
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12);
}

您可以更具体，并向选择器添加父元素，例如：

div ul:hover{
   box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12);
}

在此查看特异性的工作原理。 Prioritize id selector over an id and class

修改

注意到添加的jsfiddle：

只需选择li元素，但是：

ul li:hover{
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12);
}

你的jsfiddle中的div后面有一个跨度。 然后你可以简单地定位跨度并添加显示块和100％宽度给它一个类似的盒子阴影到应用于li的那个：

ul li span:hover{
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12);
}

span{ display:block; width:100%; }

如果您需要定位父元素，则当前的CSS3规范没有可用的选择器。您可以使用此CssParentSelector jQuery插件作为解决方法，并能够在CSS中选择父元素：https://github.com/Idered/cssParentSelector