Css 将光标悬停在重叠图元上时应用样式

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

当我将鼠标悬停在一个具有类

main

和一个方向类（

left、right、top、bottom

）的元素上时，我希望应用样式。基本上只有当我停留在内部三角形（在大正方形内）上时，而不是外部三角形

使用此示例，我希望在将鼠标悬停在

LM、TM、RM或BM

区域上时应用样式/动画，而不是在

L、T、R或B

区域上时应用样式/动画

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

但这不起作用。我真的不知道该怎么做。有什么想法吗

。胡佛盒子{
位置：相对位置；
利润率：100像素；
}
.滑块{
高度：40px；
宽度：40px；
位置：绝对位置；
背景颜色：灰色；
左：5px；
顶部：5px；
过渡：背景0.5s轻松，变换0.5s轻松；
}
梅因先生{
宽度：50px；
高度：50px；
位置：绝对位置；
背景颜色：浅蓝色；
}
.左{
变换：旋转（45度）；
不透明度：0.5；
位置：绝对位置；
左：7.5px；
顶部：7.5px；
宽度：35px；
高度：35px；
z指数：1000；
背景色：蓝紫色；
左：-17.5px；
}
.左：悬停~.滑块{
背景色：蓝紫色；
转化：translateX（100%）；
}
.顶{
变换：旋转（45度）；
不透明度：0.5；
位置：绝对位置；
左：7.5px；
顶部：7.5px；
宽度：35px；
高度：35px；
z指数：1000；
背景颜色：浅绿色；
顶部：-17.5px；
}
.top:悬停~.滑块{
背景颜色：浅绿色；
转化：translateY（100%）；
}
.对{
变换：旋转（45度）；
不透明度：0.5；
位置：绝对位置；
左：7.5px；
顶部：7.5px；
宽度：35px；
高度：35px；
z指数：1000；
背景颜色：金色；
左：32px；
}
.右：悬停~.滑块{
背景颜色：金色；
转化：translateX（-100%）；
}
.底部{
变换：旋转（45度）；
不透明度：0.5；
位置：绝对位置；
左：7.5px；
顶部：7.5px；
宽度：35px；
高度：35px；
z指数：1000；
背景颜色：深红色；
顶部：32px；
}
.bottom:悬停~.滑块{
背景颜色：深红色；
转换：translateY（-100%）；
}

---

在构建元素时，这是不可能的。有一个更简单的例子：。悬停事件会传播到中最高的元素（但z索引以外的属性会影响此操作）

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

下面是我使用透明框作为覆盖而不是三角形制作的简化版本：

。胡佛盒子{
位置：相对位置；
利润率：100像素；
}
.滑块{
高度：40px；
宽度：40px；
位置：绝对位置；
背景颜色：灰色；
左：5px；
顶部：5px；
指针事件：无；
过渡：背景0.5s轻松，变换0.5s轻松；
}
梅因先生{
宽度：50px；
高度：50px；
位置：绝对位置；
背景颜色：浅蓝色；
}
.左{
变换：旋转（45度）；
不透明度：0.5；
位置：绝对位置；
左：7.5px；
顶部：7.5px；
宽度：35px；
高度：35px；
z指数：1000；
背景色：蓝紫色；
左：-17.5px；
}
.lm:悬停~.滑块{
背景色：蓝紫色；
转化：translateX（100%）；
}
.顶{
变换：旋转（45度）；
不透明度：0.5；
位置：绝对位置；
左：7.5px；
顶部：7.5px；
宽度：35px；
高度：35px；
z指数：1000；
背景颜色：浅绿色；
顶部：-17.5px；
}
.tm:hover~.slider{
背景颜色：浅绿色；
转化：translateY（100%）；
}
.对{
变换：旋转（45度）；
不透明度：0.5；
位置：绝对位置；
左：7.5px；
顶部：7.5px；
宽度：35px；
高度：35px；
z指数：1000；
背景颜色：金色；
左：32px；
}
.rm:悬停~.滑块{
背景颜色：金色；
转化：translateX（-100%）；
}
.底部{
变换：旋转（45度）；
不透明度：0.5；
位置：绝对位置；
左：7.5px；
顶部：7.5px；
宽度：35px；
高度：35px；
z指数：1000；
背景颜色：深红色；
顶部：32px；
}
.bm:悬停~.滑块{
背景颜色：深红色；
转换：translateY（-100%）；
}
.bm、.lm、.rm、.tm{
位置：绝对位置；
显示：块；
z指数：1001；
}
.tm{
宽度：50px；
高度：20px；
}
.bm{
高度：20px；
宽度：50px；
边缘顶部：30px；
}
.rm{
宽度：20px；
高度：50px；
左边距：30px；
}
.lm{
宽度：20px；
高度：50px；
}

什么不起作用？我看到一些效果我只希望在将鼠标悬停在内部三角形（旋转的正方形与大正方形重叠的部分）上时才看到效果。当我把鼠标悬停在外部三角形上时，就像它现在是如何工作的。寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。看。我不能在代码段中使用SCS？谢谢，但这与@weBer建议的几乎相同。它还带来了相同的问题，其中lm、tm等元素具有重叠区域，仅允许触发一个悬停事件。例如，如果您将鼠标悬停在LM区域的底部，BM hover事件将触发。@mTv在这种情况下，您需要的是方向感知悬停效果，如CSS技巧：。请记住，没有CSS唯一的解决方案。是的，我想我可能不得不改变我的方法。我也找到了这个：。看起来不错。

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