6

我希望小悬停灰色箭头在缩略图导航上悬停时显示块而不是动画。你可以在这里看到演示。我一直在涉水插件的 javascript 并且无法为我的生活找出动画箭头的位置。如果可以的话，我只会注释掉该代码。那么其他人可以吗？

4

4 回答 4

10

这让我困惑了一会儿，但事实证明箭头动画实际上不在插件 javascript 中。它在 CSS 中使用-webkit-transition: all .3s ease;. 如果您查看默认 CSS 文件并转到第 52 行，则需要从.flex-direction-nav a. 所以这条线应该如下所示。

.flex-direction-nav a {
   width: 30px; 
   height: 30px; 
   margin: -20px 0 0; 
   display: block; 
   background: url(images/bg_direction_nav.png) no-repeat 0 0; 
   position: absolute; 
   top: 50%;
   z-index: 10; 
   cursor: pointer; 
   text-indent: -9999px; 
   opacity: 0;
}
于 2013-03-23T15:50:19.243 回答
2

我最近遇到了这个问题并通过覆盖以下样式解决了它（在这个问题/答案的帮助下）：

.flex-direction-nav a {
    ...
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}

在我自己的 CSS 中使用这些样式：

.flexslider .flex-direction-nav a.flex-prev,
.flexslider .flex-direction-nav a.flex-next {
    ...
    -moz-transition: none;
    -webkit-transition: none;
    transition: none;
}

我非常喜欢不修改库提供的源代码，所以我认为这是一个更好、更完整的解决方案。

于 2013-11-12T17:14:52.253 回答
1

这很简单，只需像这样更改以下css代码：

.flexslider .flex-direction-nav .flex-next {
    right: 5px; /* adjust offset to match the hover style */
    opacity: .8; /* adjust opacity to match the hover style */
}

.flexslider .flex-direction-nav .flex-prev {
    left: 5px; /* adjust offset to match the hover style */
    opacity: .8; /* adjust opacity to match the hover style */
}

于 2018-02-22T08:34:40.380 回答
0

制作自己的箭头：禁用directionNav和使用manualControls.

于 2013-03-23T14:53:55.017 回答