html – 获取CSS：悬停在重叠的兄弟姐妹身上

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

我想基于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.


最终编辑：
我正在提供我用例的完整版本.我不认为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 :(


最佳答案
在那里,经过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;
}

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

html – 获取CSS：悬停在重叠的兄弟姐妹身上

相关文章