Question

我使用flexslide来显示一些图像，现在我想将下一个/上一个图像显示为缩略图，同时将鼠标悬停在下一个和上一个箭头上。但是如果我使用图像作为thubnail鼠标效果停止工作，但如果我使用CSS边框，鼠标悬停工作正常。

我创造了一个小提琴，其中前箭头悬停一个图像（该剂量工作），下一个箭头悬停在一个简单的边界（工作） JSFIDDLE

#carousel .flex-direction-nav li a.flex-prev {
    background: url('http://cmbstaging.dreamhosters.com/assets/images/arrow-left.png') no-repeat;
    display: block;
    width: 18px;
    height: 39px;
    left: -36px;
}

我尝试更改display：block，显示：inline-block。但那没有做好。有什么提示吗？

Answer 1

当您将鼠标移到箭头按钮上时，它将触发悬停输入功能，该功能会在缩略图中消失。由于您的缩略图现在位于箭头顶部并且位于鼠标指针下方，因此只要再次移动鼠标，它就会立即注册您将鼠标悬停在缩略图上，因此不再悬停在箭头上方。这会触发您的悬停离开功能，再次将缩略图退出。这就是它一直闪烁的原因。

解决此问题的方法是在缩略图上使用css选项pointer-events: none，这样就可以使缩略图图像元素完全忽略鼠标。但请注意，IE不支持此功能（因为它们实际上支持标准，标准说指针事件选项仅适用于SVG元素）。因此，如果您尝试此方法，它将适用于除IE之外的几乎所有浏览器。

这是FIDDLE在您之前的箭头上展示这一点。（注意：在IE上不起作用）

另一种方式实际上是在箭头和缩略图之上创建一个新的透明元素。将鼠标悬停事件函数挂钩到新的透明元素，结果将显示为鼠标悬停在箭头上方使缩略图显示在顶部。

这是FIDDLE在您之前的箭头上展示这一点。我所做的是向flex-direction-nav添加一个新元素，然后将CSS设置为：

a.prevhover {
  display: block;
  width: 18px;
  height: 39px;
  left: 20px;
  background-color: transparent;
  z-index: 10000;
}

Answer 2

尝试在箭头中添加z-index。

.flex-direction-nav,
.flex-direction-nav * {
    z-index: 99999 !important;
}

在悬停时显示图像不起作用

2 个答案: