0

Im using flexslide to show some images, now I want to show the next/prev image as a thumbnail while hovering over the next and prev arrows. But if I use an image as thubnail the mouse over effect stop working, but if i use a CSS border, the hover works just fine.

I have created a fiddle where the prev arrow hovers an image(that dosent work) and the next arrow hover a simple border( works ) 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;
}

I tried to change the display:block, to display:inline-block. But that didn't do the work. Any tips ?

4

2 回答 2

2

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

解决此问题的一种方法pointer-events: none是在缩略图上使用 css 选项，这将使您的缩略图元素完全忽略鼠标。但是请注意，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;
}
于 2013-08-08T08:20:23.953 回答
1

尝试向箭头添加 z-index。 

.flex-direction-nav,
.flex-direction-nav * {
    z-index: 99999 !important;
}
于 2013-08-08T08:06:42.950 回答