html - 获取 CSS :hover on overlapping siblings

Question

这在运行下面的代码时最容易理解。我希望在将鼠标悬停在红色条上时同时触发列和中间行的悬停状态。

我想保留基于 flex 的列，并将栏绝对定位在它们之上。

这可能吗？

编辑:

我只希望鼠标悬停的那一列变成蓝色。抱歉含糊不清。片段已更新为所需结果。

列由白线分隔。将鼠标悬停在灰色区域上以查看突出显示的列。

谢谢。

.root {
  width: 100px;
  height: 100px;
  background: grey;
  position: relative;
  display: flex;
}

.column {
  display: flex;
  flex: 1 1 auto;
  border-right: 1px solid white;
}

.column:hover {
  background: blue;
}

.bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 33px;
  bottom: 33px;
  background: red;
}

.bar:hover {
  background: green;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

Hover over the middle of the square. I want the middle column to turn blue and the bar to turn green.
Right now, only the bar turns green.

<div class='root'>
  <div class='column'>
  </div>
  <div class='column'>
  </div>
  <div class='column'>
  </div>
  <div class='bar'>
  </div>
</div>

Desired result: 

<div class='root'>
  <div class='column'>
  </div>
  <div class='column blue'>
  </div>
  <div class='column'>
  </div>
  <div class='bar green'>
  </div>
</div>

最终编辑:

我正在提供我的用例的完整版本。我认为 CSS 无法解决这个问题，但我已经接受了适用于我的原始问题的答案。

function enterColumn() {
  document.getElementById('column-status').innerHTML = 'In column'
}

function leaveColumn() {
  document.getElementById('column-status').innerHTML = 'Out of column'
}

function enterBar() {
  document.getElementById('bar-status').innerHTML = 'In bar'
}

function leaveBar() {
  document.getElementById('bar-status').innerHTML = 'Out of bar'
}

.root {
  width: 100px;
  height: 100px;
  background: grey;
  position: relative;
  display: flex;
}

.column {
  display: flex;
  flex: 1 1 auto;
  border-right: 1px solid white;
}

.column:hover {
  background: blue;
}

.bar-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 33px;
  bottom: 33px;
}

.bar {
  position: absolute;
  top: 0;
  bottom: 0;
  background: red;
}

.bar:hover {
  background: green;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

Hovering over a column or bar should be independent. Right now you can never have the 'In column' and 'In bar' status at the same time :(
<br />
It should scale to support any number of columns and any number of bars (where bars can be absolutely positioned anywhere along the x-axis)
<br />
Javascript events should be called on mouse events for both columns and bars.

<div class='root'>
  <div class='column' onmouseenter='enterColumn();' onmouseleave='leaveColumn()'>
  </div>
  <div class='column' onmouseenter='enterColumn();' onmouseleave='leaveColumn()'>
  </div>
  <div class='column' onmouseenter='enterColumn();' onmouseleave='leaveColumn()'>
  </div>
  <div class='bar-container'>
    <div class='bar' style='left: 5px; right: 40px' onmouseenter='enterBar();' onmouseleave='leaveBar()'>
    </div>
    <div class='bar' style='left: 65px; right: 5px' onmouseenter='enterBar();' onmouseleave='leaveBar()'>
    </div>
  </div>
</div>

<div id='column-status'>
  Out of column
</div>
<div id='bar-status'>
  Out of bar
</div>

Answer 1

好了，经过 2 小时的反复试验，我终于想出了这个小技巧。

.root {
  width: 100px;
  height: 100px;
  background: grey;
  position: relative;
  display: flex;
}

.column {
  display: flex;
  flex: 1 1 auto;
  border-right: solid #fff 1px;
}

.column:hover {
  background: blue;
}

.column .toggle{
  margin-top:33px;
  height: 33px;
  width: 100%;
}

.column .toggle:before{
  content: "";
  position: absolute;
  width: 34px;
  height: 33px;
}

.column .toggle:hover:after{
  content: "";
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 33px;
  bottom: 33px;
  background: green;
  pointer-events:none;
}

.bar {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 33px;
  bottom: 33px;
  background: red;
  pointer-events:none;
}

<div class='root'>
  <div class='column'><div class='toggle'></div></div>
  <div class='column'><div class='toggle'></div></div>
  <div class='column'><div class='toggle'></div></div>
  <div class='bar'></div>
</div>

现在，如果您需要将一些 javascript 事件绑定(bind)到 .bar 元素，请将它们附加到 .toggle。