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

Question

我有一个看起来像这样的UI

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

我希望area1和area2在其中任何一个悬停时显示特定的样式.现在,如果指针超过了area1,那么我就得到了

+---------------------------+
|                           |
|  +--area1--+ +--area2--+  |
|  |.........| |         |  |
|  |....?....| |         |  |
|  +---------+ +---------+  |
|                           |
+---------------------------+

如果指针超过了area2,我得到了

+---------------------------+
|                           |
|  +--area1--+ +--area2--+  |
|  |         | |.........|  |
|  |         | |....?....|  |
|  +---------+ +---------+  |
|                           |
+---------------------------+

我想要的是如果指针位于区域1或区域2上,我的两个区域都显示其悬停状态

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

这当然是可能的.

涉及两个步骤:

1)将悬停效果放在容器上,这样只要将鼠标悬停在容器中的任何位置 - area1和area2都会获得新的背景

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

这里的问题是,现在悬停效果将在容器中的任何位置生效,而不仅仅是当我将鼠标悬停在2个区域上时.所以....

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

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

但是,只要鼠标悬停在2个区域上,我们就会再次启用指针事件,并且悬停效果会自动生效.

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

小提琴

* {
  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>