如果多维数据集直接位于容器内：

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

如果多维数据集位于容器旁边（在容器结束标记之后）：

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

如果多维数据集位于容器内的某个位置：

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

如果立方是容器的同级：

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

在此特定示例中，您可以用途：

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

这个例子只适用于cube是container的子元素的情况，对于更复杂的场景，你需要使用不同的CSS，或者使用JavaScript。

当鼠标悬停在一个给定元素上时，使用兄弟选择器是对其他元素进行样式化的通用解决方案，但是只有当其他元素在DOM中跟随给定元素时，**它才起作用 *。当其他元素实际上应该在悬停元素之前时，我们该怎么做呢？假设我们想要实现一个信号条评级小部件，如下所示：

这实际上可以使用CSS flexbox模型轻松实现，方法是将flex-direction设置为reverse，这样元素的显示顺序就与它们在DOM中的顺序相反。
Flexbox得到了95%的现代浏览器非常好的支持。

.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>

只有这个对我有效：

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

其中.cube是#container内部某个位置的CssClass。
已在Firefox、Chrome和Edge中测试。

下面是另一个想法，它允许您在不考虑任何特定选择器的情况下，仅使用主元素的:hover状态来影响其他元素。
为此，我将依赖于使用自定义属性（CSS变量）。正如我们在specification：
自定义属性是普通属性，因此它们可以在任何元素上声明，使用常规继承和级联*规则解析 * ...
其思想是在主元素中定义自定义属性，并使用它们来设置子元素的样式，由于这些属性是继承的，因此我们只需要在悬停时在主元素中更改它们。
下面是一个例子：

#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);
}

个字符

为什么这比使用特定选择器结合悬停更好？

我可以提供至少2个理由，使这个方法是一个很好的考虑：
1.如果我们有许多嵌套元素共享相同的样式，这将避免我们在悬停时使用复杂的选择器来定位所有元素。使用自定义属性，我们只需在悬停在父元素上时更改值。
1.自定义属性可以用来替换任何属性的值，也可以替换它的部分值。例如，我们可以定义一个颜色的自定义属性，并在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声明就可以改变不同元素的许多属性。

非常感谢Mike和Robertc的帮助帖子！
如果HTML中有两个元素，并且您希望对其中一个元素进行:hover操作，而对另一个元素进行样式更改，则这两个元素必须直接相关--父元素、子元素或兄弟元素。这意味着这两个元素必须一个在另一个之内，或者必须都包含在同一个较大的元素中。
我想在用户浏览我的站点时，在浏览器右侧的框中显示定义，并在突出显示的术语上显示:hover;因此，我不希望'definition'元素显示在'text'元素内部。
我几乎放弃了，只是添加了javascript到我的页面，但这是未来该死的！我们不应该忍受从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：
x一个一个一个一个x一个一个二个x
在本例中，来自#explainBox内元素的:hover命令的目标必须是#explainBox或#explainBox内。分配给#definitions的position属性强制它出现在所需位置（#explainBox外），即使从技术上讲它位于HTML文档内不需要的位置。
我知道对多个HTML元素使用相同的#id被认为是不好的;然而，在这种情况下，#light的示例可以被独立地描述，因为它们在唯一的#id元素中的各自位置。在这种情况下，有什么理由不重复idx 1 m14n1x吗？

**警告：**如果您能够使用CSS：使用CSS而不使用Javascript！

如果要选择具有未知**/或无法到达位置的**元素，可以使用JavaScript。

const cube = document.getElementById('cube')
const container = document.getElementById('container')

cube.addEventListener('mouseover', () => container.style.backgroundColor = "blue")
cube.addEventListener('mouseleave', () => container.style.backgroundColor = "white")

div {
  outline: 1px solid red;
  width: 200px;
  height: 30px;
}

#cube {
  background-color: red;
}

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

#imageDiv:hover  #detailDiv
{
    z-index: -999 !important;
}

这里
#imageDiv是要悬停第一个div，
#detailDiv是css在悬停时应用的第二个div
如果我将鼠标悬停在第一个div上，那么zindex将分配给第二个div
对我有用

除了在其他答案中已经提供的常用选择器之外，现在还可以在没有父/子或兄弟关系的情况下使用:has()。
下面是一个例子：

.box {
  width: 200px;
  aspect-ratio: 1;
  display: inline-block;
  border: 1px solid red;
}

.box > div {
  margin: 5px;
  height: 100%;
  border: 2px solid green;
  cursor: pointer;
}
/* when div1 is hovered make div2 blue */
body:has(#div1:hover) #div2 {
  background: blue;
}
/* when div2 is hovered make div1 purple */
body:has(#div2:hover) #div1 {
  background: purple;
}

<div class="box">
  <div id="div1">
  </div>
</div>

<div class="box">
  <div id="div2">
  </div>
</div>

如您所见，我们可以通过悬停div2来影响div1，反之亦然。