Question

我有一个看起来像这样的用户界面

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

我喜欢area1和area2，以便在其中任何一个悬停时显示特定的样式。现在，如果指针超过了区域1，那么我得到

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

如果指针在区域2上，我得到

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

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

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

只有CSS可以吗？

这里有一些实时HTML / CSS

＆＃13;

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

＆＃13;

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

＆＃13;

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

FIDDLE

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以通过容器div围绕这两个区域，并将您的CSS调整为：

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

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

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

您也可以执行类似于folloging的操作，但+仅适用于跟随悬停元素的元素，而不适用于之前的元素（这将导致仅用于悬停在.area1上，但是.area2徘徊，只有.area2会被着色。）

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

Answer 3

只有这样才能以一种方式运作，例如：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;
}

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

3 个答案:

FIDDLE