Question

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

当我将鼠标悬停在具有类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%);
  }

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

＆＃13;

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

＆＃13;

select left(col, len(col) - charindex('.', reverse(col)))

＆＃13;

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>

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

1 个答案: