JQuery滑块箭头

Question

我在shopify上有一个网站，我希望当你将鼠标悬停在它上面时，滑块箭头会淡入，当鼠标离开时，它会淡出。现在箭头突然出现了。我有滑块的shopify的js文件，但我不知道在哪里编辑代码。任何帮助将不胜感激！

Answer 1

您必须在css文件中添加箭头样式。

示例 - https://jsfiddle.net/jc0otowt/2/

代码：

/* FlexSlider Fade In/Out Arrows*/
div.flexslider .flex-direction-nav .flex-prev {
  left: 10px;
}

div.flexslider:hover .flex-direction-nav .flex-prev {
  left: 10px;
}

div.flexslider .flex-direction-nav .flex-next {
  right: 10px;
}

div.flexslider:hover .flex-direction-nav .flex-next {
  right: 10px;
}

Answer 2

检查持有​​箭头的div并获取类，转到stylesheet.css并使用opacity 0和transition: all 1s ease（或任何计时功能）设置此类的样式。然后在鼠标输入时通过向类添加:hover伪和不透明度1来使其可见。

结果如下：

.divClass {
  opacity:0;
  transition: all 1s ease;
}

.divClass:hover {
  opacity:1;
}

或者您可以在fadeToggle mouseover次活动中使用JQ mouseout。