CSS 在不相关的元素上悬停样式？

Question

我有一个 UI 看起来像这样

+---------------------------+
|                           |
|  +--area1--+ +--area2--+  |
|  |         | |         |  |
|  |         | |         |  |
|  +---------+ +---------+  |
|                           |
+---------------------------+

我希望 area1 和 area2 在悬停其中一个时显示特定的样式。现在如果指针在 area1 上，那么我得到

+---------------------------+
|                           |
|  +--area1--+ +--area2--+  |
|  |.........| |         |  |
|  |....☝....| |         |  |
|  +---------+ +---------+  |
|                           |
+---------------------------+

如果指针在 area2 上，我得到

+---------------------------+
|                           |
|  +--area1--+ +--area2--+  |
|  |         | |.........|  |
|  |         | |....☝....|  |
|  +---------+ +---------+  |
|                           |
+---------------------------+

我想要的是，如果指针在 area1 或 area2 上，我两个区域都显示它们的悬停状态

+---------------------------+
|                           |
|  +--area1--+ +--area2--+  |
|  |.........| |.........|  |
|  |....☝....| |.........|  |
|  +---------+ +---------+  |
|                           |
+---------------------------+

仅 CSS 可以吗？

这是一些直播HTML/CSS

* { 
  box-sizing: border-box;
}
html,body { 
  width: 100%;
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100%;
}
.unrelatedcontainer {
  width: 100%;
  height: 100%;
  border: 1px solid red;
}
.area1,
.area2 {
  margin: 3em;
  height: 80%;
  border: 1px solid black;
  
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.area1:hover, 
.area2:hover {
  background-color: green;
}

<div class="container">
  <div class="unrelatedcontainer">
    <div class="area1">
      <div class="content">area1</div>
    </div>
  </div>
  <div class="unrelatedcontainer">
    <div class="area2">
      <div class="content">area2</div>
    </div>
  </div>
</div>

Answer 1

这里只有一种方式有效，例如：http://jsfiddle.net/u7tYE/

当您将鼠标悬停在一个 div 上时，它会悬停在另一个 div

<div id="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.

</div>
<div id="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.

</div>

div{
  height 200px;
  background-color: #ddd;
  margin-top:20px
}

/*  this is working */
#a:hover+ #b{
  background-color:red;
}
/* This will not work */
#b:hover + #a{
  background-color:blue !important;
}

Answer 2

您可以用一个容器包围这两个区域 div 并将您的 css 调整为：

.container:hover > div{
    background-color: #000000;
}

如果您将鼠标悬停在容器上，这将为您的 .container div 内的所有 div 提供黑色背景。

请注意：如果您将悬停在区域之间，也会发生这种情况。否则你需要 Javascript，例如jQuery

你也可以做类似下面的事情，但是 + 只对悬停元素后面元素起作用，而不对之前的元素起作用（这将导致只对悬停元素起作用.area1，但是当悬停.area2时，只有.area2会被着色）。

.area1:hover + .area2, .area2:hover + .area1, .area1:hover, .area2:hover{
  background-color: #000000;
}

Answer 3

这当然是可能的。

涉及两个步骤：

1) 将悬停效果放在容器上，这样只要悬停在容器中的任何地方 - area1 和 area2 都会获得它们的新背景

.container:hover .area1,.container:hover .area2 {
   background-color: green;
}

这里的问题是，现在悬停效果将在容器中的任何地方 生效，而不仅仅是当我将鼠标悬停在这两个区域上时。所以....

2) 诀窍是关闭容器上的指针事件并在 2 个区域上重新打开它们。

因此，当鼠标悬停在容器中 2 个区域之外的任何位置时 - 不会应用悬停效果，因为我们已禁用容器上的指针事件。

但是，一旦鼠标悬停在这 2 个区域上 - 我们会再次启用指针事件，悬停效果就会生效。

.container{
  pointer-events:none;
}
.container .area1,.container .area2{
  pointer-events:all;
}

FIDDLE

* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100%;
}
.container {
  pointer-events: none;
}
.container .area1,
.container .area2 {
  pointer-events: all;
}
.container:hover .area1,
.container:hover .area2 {
  background-color: green;
}
.unrelatedcontainer {
  width: 100%;
  height: 100%;
  border: 1px solid red;
}
.area1,
.area2 {
  margin: 3em;
  height: 80%;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

<div class="container">
  <div class="unrelatedcontainer">
    <div class="area1">
      <div class="content">area1</div>
    </div>
  </div>
  <div class="unrelatedcontainer">
    <div class="area2">
      <div class="content">area2</div>
    </div>
  </div>
</div>

CSS 在不相关的元素上悬停样式？

CSS hover styles on unrelated elements?

html

css

hover

FIDDLE