Question

我正在尝试实现导航箭头，因为它们在此ekko-lightbox gallery example中工作 - 只有当鼠标悬停在图像的右侧或左侧时，它们才会出现在右侧和左侧。我一直在梳理开发人员工具中的脚本，但仍然无法推断它是如何完成的（我对css很新）。我的网站上的箭头出现在悬停状态，但我想使用这种更微妙的方法，一次只显示一个，取决于您所在的图像的哪一侧。

Ekko lightbox基于Bootstrap的模态，所以也许在CSS中有一种方法可以做这样的事情（？）：

.modal-content(width: 50%):hover .arrow-left {
  display: block;
}

Answer 1

大多数情况下，您创建的元素覆盖您想要控制悬停的区域，然后使用显示或悬停时的不透明度来调整。这是一个简单的例子

.lightBox {
  width: 800px;
  height: 400px;
  border: 1px solid black;
}

.navHolder {
  width: 50%;
  float: left;
  height: 100%;
  opacity: 0;
}

.navHolder:hover {
  opacity: 1;
}

<div class="lightBox">
  <div class="navHolder">
    <span>arrow</span>
  </div>
  <div class="navHolder">
    <span>arrow</span>
  </div>
</div>

将光标移动到灯箱中的一半以上时，如何显示单个导航箭头

1 个答案: