Question

我有这个Fiddle，我想要做的是当你将鼠标放在每个div部分上时，它只会改变该部分的背景。如果不改变一切的背景，我有什么方法可以做到这一点？当我将鼠标悬停在.two上时，.one:hover会被触发。当我将鼠标悬停在.two上时，如何触发.one而不是.two？

CSS：

div.one:hover, div.two:hover, div.three:hover{
    background-color: #69aeea;
}

HTML：

<div class="one">
    Text 1
    <div class="two">
        Text 2
        <div class="three">Text 3</div>
        <div class="three">Text 3</div>
        <div class="three">Text 3</div>
    </div>
    <div class="two">
        Text 2
        <div class="three">Text 3</div>
        <div class="three">Text 3</div>
        <div class="three">Text 3</div>
    </div>
</div>

Answer 1

:hover一直触发到根父级（通常为<body>），因此当父级有:hover个状态时，您无法仅在子级上触发它。

您需要做的是隔离您实际想要显示悬停状态的部分，在这种情况下，我通过将文本包装在<span>中来完成。这将使:hover状态与该父级的其他子级隔离。

<div class="one">
  <span>Text 1</span>
  <div class="two">
    <span>Text 2</span>
    <div class="three"><span>Text 3</span></div>
...

然后专门针对CSS：（>字符选择父母的直接后代）

div > span:hover {
  background-color: #69aeea;
}

然后你可以根据这样的水平做不同的颜色：

div.one > span:hover {
  background-color: #69aeea;
}
div.two > span:hover {
  background-color: #ae69ea;
}
div.three > span:hover {
  background-color: #aeea69;
}

DEMO： http://jsfiddle.net/shshaw/8uetm/

Answer 2

不幸的是，您无法访问CSS中元素的父级。这意味着，如果将鼠标悬停在子元素上，则无法设置其父元素的背景。你必须使用javascript来实现你所要求的。

CSS悬停子div背景颜色变化

2 个答案: