我认为这是一个非常基本的问题，但我不确定如何做到这一点。
我想要做的是当某个div悬停时，它会影响另一个div的属性。
例如，在this simple example中，当您将鼠标悬停在#cube上时，它会更改background-color，但我想要的是当我将鼠标悬停在#container上时，{{1}受影响。
#cubediv {
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;
}
答案 0 :(得分：798)
如果立方体直接位于容器内：
#container:hover > #cube { background-color: yellow; }
如果cube位于（容器关闭标记之后）容器旁边：
#container:hover + #cube { background-color: yellow; }
如果立方体位于容器内的某个位置：
#container:hover #cube { background-color: yellow; }
如果立方体是容器的兄弟：
#container:hover ~ #cube { background-color: yellow; }
答案 1 :(得分：37)
在此特定示例中，您可以使用：
#container:hover #cube {
background-color: yellow;
}
这仅适用，因为cube是container的孩子。对于更复杂的场景，您需要使用javascript。
答案 2 :(得分：6)
非常感谢Mike和Robertc的有用帖子！
如果您的HTML中有两个元素，并且您希望:hover超过一个元素并且另一个元素的样式更改，那么这两个元素必须直接相关 - 父母，孩子或兄弟姐妹。这意味着这两个元素必须是一个在另一个内部，或者必须都包含在同一个更大的元素中。
我想在浏览器右侧的框中显示定义，因为我的用户通过我的网站阅读了:hover突出显示的术语;因此，我不希望'definition'元素显示在'text'元素中。
我几乎放弃了，只是将javascript添加到我的页面，但这是未来的dang吧！我们不应该忍受来自CSS和HTML的后退，告诉我们在哪里放置元素以实现我们想要的效果！最后我们妥协了。
虽然文件中的实际HTML元素必须嵌套或包含在单个元素中才能成为彼此有效的:hover目标，但可以使用css position属性来显示任何你想要的元素。我使用position：fixed将我:hover操作的目标放在用户屏幕上我想要的位置，而不管它在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;
}
在此示例中，:hover中元素的#explainBox命令的目标必须是#explainBox或#explainBox。分配给#definitions的位置属性会强制它出现在所需位置（#explainBox之外），即使它在技术上位于HTML文档中不需要的位置。
我理解对多个HTML元素使用相同的#id被认为是不好的形式;但是，在这种情况下，#light的实例可以独立描述，因为它们在唯一的#id'd元素中的位置。在这种情况下，有任何理由不重复id #light吗？
答案 3 :(得分：4)
只有这对我有用：
#container:hover .cube { background-color: yellow; }
其中.cube是#cube的CssClass。
在 Firefox ， Chrome 和边缘中进行了测试。
答案 4 :(得分：0)
这是另一个想法，允许您在不考虑任何特定选择器的情况下影响其他元素，并且仅使用主元素的:hover状态。
为此，我将依赖于自定义属性（CSS变量）的使用。正如我们可以在specification中看到的那样：
自定义属性是普通属性，因此可以声明它们 任何元素，使用正常继承和级联解析 规则 ...
我们的想法是在main元素中定义自定义属性并使用它们来设置子元素的样式，因为这些属性是继承的，我们只需要在悬停时在main元素中更改它们。
以下是一个例子：
#container {
width: 200px;
height: 30px;
border: 1px solid var(--c);
--c:red;
}
#container:hover {
--c:blue;
}
#container > div {
width: 30px;
height: 100%;
background-color: var(--c);
}<div id="container">
<div>
</div>
</div>
为什么这比使用特定选择器与悬停结合更好？
我可以提供至少2个使这种方法成为好方法的理由：
border，linear-gradient，background-color，box-shadow等内使用它。这样可以避免我们重置所有这些属性在悬停。这是一个更复杂的例子：
.container {
--c:red;
width:400px;
display:flex;
border:1px solid var(--c);
justify-content:space-between;
padding:5px;
background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat;
}
.box {
width:30%;
background:var(--c);
box-shadow:0px 0px 5px var(--c);
position:relative;
}
.box:before {
content:"A";
display:block;
width:15px;
margin:0 auto;
height:100%;
color:var(--c);
background:#fff;
}
/*Hover*/
.container:hover {
--c:blue;
}<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
正如我们上面所看到的，我们只需要一个CSS声明来更改不同元素的许多属性。
答案 5 :(得分：-1)
#imageDiv:hover ~ #detailDiv
{
z-index: -999 !important;
}
这里
#imageDiv 是第一个要悬停的 div 和
#detailDiv 是将在悬停时应用的 css 上的第二个 div
因此，如果我将鼠标悬停在第一个 div 上，那么 zindex 将分配给第二个 div
对我有用