无关元素上的CSS hover样式？

Question

无关元素上的CSS hover样式？

4

我有一个 UI，长得像这样

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

我希望当鼠标悬停在区域1或区域2上时，两个区域都显示特定的样式。现在，如果指针悬停在区域1上，则会出现

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

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

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

- gman

2

你需要更改标记。如果你的.area1和.area2是并排的，那么你可以这样做。在你现有的标记中，唯一的解决方案是使用JavaScript（CSS无法定位父元素并返回找到第二个区域进行绘制）。 - Marcos Pérez Gude

仅使用CSS是不可能的。如果你去掉.unrelatedcontainer，那么sibling selector可能对你有所帮助。然而，仅使用CSS无法选择前一个兄弟元素：https://dev59.com/vnI-5IYBdhLWcg3whImk - Kyle O

1

我认为这是可能的 - 这个fiddle非常接近 - 我正在努力。 - Novocaine

3个回答

0

您可以通过对容器 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;
}

- mad_manny

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

- Raza Hussain

3

OP想要的不是这样。他们希望当悬停在其中任何一个div上时，两个div都能被突出显示。 - Novocaine

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Danield · Accepted Answer

这肯定是可以实现的。

需要分两步进行：

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

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