Question

上下文：我有一个照相馆，正在使用transform在幻灯片之间移动在每张幻灯片上，我都有一个需要单击的按钮，但是如果您在该按钮之外单击，则应根据鼠标位置（50％-50％）触发向左/向右过渡。另外，如果您在按钮之外，则应该触发向左或向右箭头的悬停效果。

我的代码：

.gallery {
  width: 500px;
  height: 500px;
  margin: 100px auto 0;
  border: 1px solid black;
  position: relative;
}
.gallery .arrows-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.2;
  z-index: 1;
}
.gallery .arrows-layer:hover {
  background-color: green;
}
.gallery .sliding-section {
  width: 100%;
  height: 100%;
}
.gallery .sliding-section .slide {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.gallery .sliding-section .button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 40px;
  background-color: red;
  position: relative;
  z-index: 2;
}
.gallery .sliding-section .button:hover {
  background-color: blue;
}

<div class="gallery">

  <div class="arrows-layer"></div>
  
  <div class="sliding-section" style="transform: translateX(0px);">
    <div class="slide" style="transform: translateX(0px);">
      <div class="button">click</div>
    </div>
  </div>
  
</div>

如果我删除了transform属性，它可以正常工作，但是我需要它来产生滑动效果

有什么解决方法吗？

如何正确使用z-index并对兄弟姐妹和孩子进行转换

0 个答案: