如何影响其他元素，当div被徘徊

我认为这是一个非常基本的问题，但我不知道如何做到这一点。

我想要做的是当一个div被徘徊的时候，会影响另一个div的属性。

例如，在这个简单的例子中 ，当您将鼠标hover在#cube它将更改background-color但是我想要的是，当我将鼠标hover在#container #cube时， #container #cube受到影响。

 div { outline: 1px solid red; } #container { width: 200px; height: 30px; } #cube { width: 30px; height: 100%; background-color: red; } #cube:hover { width: 30px; height: 100%; background-color: blue; } 

 <div id="container"> <div id="cube"> </div> </div> 

Answer 1

如果立方体直接在容器内：

 #container:hover > #cube { background-color: yellow; } 

如果多维数据集（容器closures标签之后）旁边的容器：

 #container:hover + #cube { background-color: yellow; } 

如果多维数据集在容器内的某处：

 #container:hover #cube { background-color: yellow; } 

如果多维数据集是容器的一个兄弟：

 #container:hover ~ #cube { background-color: yellow; } 

Answer 2

在这个特定的例子中，你可以使用：

 #container:hover #cube { background-color: yellow; } 

这只适用于cube是container一个孩子。 对于更复杂的情况，你需要使用JavaScript。

Answer 3

使用兄弟select器是一种通用的解决scheme，当鼠标hover在一个给定的元素上时，其他元素的样式也是一样的， 但是 只有当其他元素遵循DOM中的给定元素时才能使用 。 当其他元素实际上应该放在徘徊之前时，我们能做些什么？ 假设我们要实现一个信号栏评级小部件，如下所示：

这实际上可以使用CSS flexbox模型轻松完成，方法是将flex-direction设置为reverse ，以便以与DOM中的元素相反的顺序显示元素。 上面的屏幕截图来自这样的一个小部件，用纯CSS实现。

95％的现代浏览器都能很好地支持Flexbox 。

 .rating { display: flex; flex-direction: row-reverse; width: 9rem; } .rating div { flex: 1; align-self: flex-end; background-color: black; border: 0.1rem solid white; } .rating div:hover { background-color: lightblue; } .rating div[data-rating="1"] { height: 5rem; } .rating div[data-rating="2"] { height: 4rem; } .rating div[data-rating="3"] { height: 3rem; } .rating div[data-rating="4"] { height: 2rem; } .rating div[data-rating="5"] { height: 1rem; } .rating div:hover ~ div { background-color: lightblue; } 

 <div class="rating"> <div data-rating="1"></div> <div data-rating="2"></div> <div data-rating="3"></div> <div data-rating="4"></div> <div data-rating="5"></div> </div> 

Answer 4

非常感谢Mike和Robertc对他们有帮助的post！

如果在HTML中有两个元素，并且希望:hover在另一个元素上，并在另一个元素中指定样式更改，则这两个元素必须直接相关 – 父母，子女或兄弟姐妹。 这意味着这两个要素必须是一个在另一个之内，或者都必须包含在同一个较大的要素中。

我想在浏览器右侧的框中显示定义，因为我的用户通过我的网站进行阅读，并将:hover在突出显示的条目上; 因此，我不希望在'text'元素中显示'definition'元素。

我几乎放弃了，只是添加到我的网页的JavaScript，但这是未来当它呢！ 我们不应该忍受来自CSS和HTML的背景，告诉我们在哪里放置我们的元素来实现我们想要的效果！ 最后我们妥协了。

虽然文件中的实际HTML元素必须嵌套或包含在单个元素中才能生效:hover对象:hover在对方中，可以使用css position属性来显示任何您想要的元素。 我使用position：fixed将我的:hover动作的目标放置在用户的屏幕上，而不pipe它在HTML文档中的位置。

html：

 <div id="explainBox" class="explainBox"> /*Common parent*/ <a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light /*highlighted term in text*/ </a> is as ubiquitous as it is mysterious. /*plain text*/ <div id="definitions"> /*Container for :hover-displayed definitions*/ <p class="def" id="light"> /*example definition entry*/ Light: <br/>Short Answer: The type of energy you see </p> </div> </div> 

CSS：

 /*read: "when user hovers over #light somewhere inside #explainBox set display to inline-block for #light directly inside of #definitions.*/ #explainBox #light:hover~#definitions>#light { display: inline-block; } .def { display: none; } #definitions { background-color: black; position: fixed; /*position attribute*/ top: 5em; /*position attribute*/ right: 2em; /*position attribute*/ width: 20em; height: 30em; border: 1px solid orange; border-radius: 12px; padding: 10px; } 

在这个例子中，来自#explainBox一个元素的:hover命令的目标必须是#explainBox或者#explainBox 。 分配给#definitions的位置属性强制它出现在所需位置（在#explainBox之外），即使它在技术上位于HTML文档中不需要的位置。

我知道它被认为是不好的forms使用相同的#id多个HTML元素; 然而，在这种情况下， #light的实例可以被独立地描述，因为它们在独特的#id元素中的位置。 在这种情况下是否有任何理由不重复id #light ？

Answer 5

只有这对我有用：

 #container:hover .cube { background-color: yellow; } 

其中.cube是.cube的CssClass。

testingFirefox ， Chrome和Edge 。