将鼠标悬停在重叠元素上时应用样式

Question

当我将鼠标悬停在两个元素的重叠部分上时，我正在尝试应用一些动画。我该怎么做？

当我将鼠标悬停在具有 main 类和方向类之一 (left, right, top, bottom) 的元素上时，我想应用样式。基本上只有当我将鼠标悬停在内部三角形（大正方形内部）而不是外部三角形时。

使用此示例，我想在将鼠标悬停在区域 LM, TM, RM or BM 上时应用样式/动画，而不是在将鼠标悬停在 L, T, R or B 上时应用样式/动画。

           ^
          / \
         /   \
        /  T  \
       /       \
      /_________\
     /|\       /|\
    / | \ TM  / | \
   /  |  \   /  |  \
  /   |   \ /   |   \
 <  L | LM x RM | R  >
  \   |   / \   |   /
   \  |  /   \  |  /
    \ | / BM  \ | /
     \|/___ ___\|/
      \         /
       \       /
        \  B  /
         \   /
          \ /
           v

试过类似的东西：

&:hover&.main:hoover ~ .slider {
    background-color: blueviolet;
    transform: translateX(100%);
}

但这没有用。无法真正弄清楚如何做到这一点。有什么想法吗？

.hoover-box {
  position: relative;
  margin: 100px;
}

.slider {
  height: 40px;
  width: 40px;
  position: absolute;
  background-color: grey;
  left: 5px;
  top: 5px;
  transition: background 0.5s ease, transform 0.5s ease;
}

.main {
  width: 50px;
  height: 50px;
  position: absolute; 
  background-color: lightblue;
}

.left {
  transform: rotate(45deg);
  opacity: 0.5;
  position: absolute;
  left: 7.5px;
  top: 7.5px;
  width: 35px;
  height: 35px;
  z-index: 1000;
  background-color: blueviolet;
  left: -17.5px;
}

.left:hover ~ .slider {
    background-color: blueviolet;
    transform: translateX(100%);
  }

.top {
  transform: rotate(45deg);
  opacity: 0.5;
  position: absolute;
  left: 7.5px;
  top: 7.5px;
  width: 35px;
  height: 35px;
  z-index: 1000;
  background-color: lightgreen;
  top: -17.5px;
  
}
  .top:hover ~ .slider {
    background-color: lightgreen;
    transform: translateY(100%);
  }

.right {
  transform: rotate(45deg);
  opacity: 0.5;
  position: absolute;
  left: 7.5px;
  top: 7.5px;
  width: 35px;
  height: 35px;
  z-index: 1000;
  background-color: gold;
  left: 32px;
  
}

  .right:hover ~ .slider {
    background-color: gold;
    transform: translateX(-100%);
  }

.bottom {
  transform: rotate(45deg);
  opacity: 0.5;
  position: absolute;
  left: 7.5px;
  top: 7.5px;
  width: 35px;
  height: 35px;
  z-index: 1000;
  background-color: crimson;
  top: 32px;
  

}
  .bottom:hover ~ .slider {
    background-color: crimson;
    transform: translateY(-100%);
  }

<div class="hoover-box">
  <div class="left"></div>
  <div class="top"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  <div class="main"></div>
  <div class="slider"></div>
</div>

jsfiddle

Answer 1

因为您已经构建了元素，所以这是不可能的。有一个更简单的例子：CSS: show style on hover over multiple divs placed one over another。悬停事件被传播到z-index stack 中最高的元素（但除 z-index 之外的属性会影响这一点）。

要使这项工作如您所愿，您需要为 TM、RM、LM 和 BM 部分创建三角形并在那里设置悬停事件。

以下是我使用透明框而不是三角形作为叠加层制作的简化版本：

.hoover-box {
  position: relative;
  margin: 100px;
}

.slider {
  height: 40px;
  width: 40px;
  position: absolute;
  background-color: grey;
  left: 5px;
  top: 5px;
  pointer-events: none;
  transition: background 0.5s ease, transform 0.5s ease;
}

.main {
  width: 50px;
  height: 50px;
  position: absolute; 
  background-color: lightblue;
}

.left {
  transform: rotate(45deg);
  opacity: 0.5;
  position: absolute;
  left: 7.5px;
  top: 7.5px;
  width: 35px;
  height: 35px;
  z-index: 1000;
  background-color: blueviolet;
  left: -17.5px;
}

.lm:hover ~ .slider {
    background-color: blueviolet;
    transform: translateX(100%);
  }

.top {
  transform: rotate(45deg);
  opacity: 0.5;
  position: absolute;
  left: 7.5px;
  top: 7.5px;
  width: 35px;
  height: 35px;
  z-index: 1000;
  background-color: lightgreen;
  top: -17.5px;
  
}
  .tm:hover ~ .slider {
    background-color: lightgreen;
    transform: translateY(100%);
  }

.right {
  transform: rotate(45deg);
  opacity: 0.5;
  position: absolute;
  left: 7.5px;
  top: 7.5px;
  width: 35px;
  height: 35px;
  z-index: 1000;
  background-color: gold;
  left: 32px;
  
}

  .rm:hover ~ .slider {
    background-color: gold;
    transform: translateX(-100%);
  }

.bottom {
  transform: rotate(45deg);
  opacity: 0.5;
  position: absolute;
  left: 7.5px;
  top: 7.5px;
  width: 35px;
  height: 35px;
  z-index: 1000;
  background-color: crimson;
  top: 32px;
  

}
  .bm:hover ~ .slider {
    background-color: crimson;
    transform: translateY(-100%);
  }

.bm, .lm, .rm, .tm {
  position: absolute;
  display: block;
  z-index: 1001;
}

.tm {
  width: 50px;
  height: 20px;
}

.bm {
  height: 20px;
  width: 50px;
  margin-top: 30px;
}

.rm {
  width: 20px;
  height: 50px;
  margin-left: 30px;
}

.lm {
  width: 20px;
  height: 50px;
}

<div class="hoover-box">
  <div class="left"></div>
  <div class="top"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  <div class="main"></div>
  <div class="rm"></div>
  <div class="lm"></div>
  <div class="bm"></div>
  <div class="tm"></div>
  <div class="slider"></div>
</div>