悬停时显示图像不起作用

Question

我正在使用 flexslide 显示一些图像，现在我想将下一个/上一个图像显示为缩略图，同时将鼠标悬停在下一个和上一个箭头上。 但是，如果我使用图像作为缩略图，鼠标悬停效果将停止工作，但如果我使用 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 更改为 display:inline-block。但这并没有奏效。 有什么建议吗？

Answer 1

尝试为箭头添加 z-index。

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

Answer 2

当您将鼠标移到箭头按钮上时，它将触发在您的缩略图中淡出的悬停输入功能。由于您的缩略图现在位于箭头的顶部和鼠标指针的正下方，一旦您再次移动鼠标，它会立即记录您正在将鼠标悬停在缩略图上，因此不再悬停在箭头上。这会触发您的悬停离开功能，使您的缩略图再次淡出。这就是它一直闪烁的原因。

解决此问题的一种方法是在缩略图上使用 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;
}