Question

我想在悬停时显示效果，我有两个下一个/上一个按钮，我希望在父div旋转时淡出/淡出。

我的Html：

<div id="cslider">
   <a href="javascript:;" class="control_next"><i class="fa fa-arrow-right"></i></a>
   <a href="javascript:;" class="control_prev"><i class="fa fa-arrow-left"></i></a>
</div>

Answer 1

您可以使用transition和opacity让它适合您，因为opacity可以转换，并且在不离开DOM的情况下也会产生相同的效果：

#cslider {
  padding: 50px;
  text-align: center;
}

#cslider a {
  opacity: 0.25;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

#cslider:hover a {
  opacity: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div id="cslider">
  <a href="javascript:;" class="control_next"><i class="fa fa-arrow-right"></i></a>
  <a href="javascript:;" class="control_prev"><i class="fa fa-arrow-left"></i></a>
</div>

Answer 2

悬停#cslider会降低prev and next icon的不透明度。

＆＃13;

#cslider > a{
  opacity:1;
  transition: opacity 0.6s ease;
}
#cslider:hover > a{
  opacity:0.1;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
<div id="cslider">
   <a href="javascript:;" class="control_next"><i class="fa fa-arrow-right"></i></a>
   <a href="javascript:;" class="control_prev"><i class="fa fa-arrow-left"></i></a>
</div>

＆＃13;

Answer 3

如果您正在使用jQuery（我假设这是滑块经常出现的情况），您可以使用这段代码来检测悬停活动：

`$('#cslider').hover(
  function() {
    $('.control_prev,.control_next').fadeIn();
  },function() {
    $('.control_prev,.control_next').fadeOut();
  } 
);`

Demo

Answer 4

对我来说工作非常顺利：

＆＃13;

restorecon -rv default/

＆＃13;

a {
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
}

#cslider:hover  a {
    opacity: 1;
    transition: opacity 4s linear;
}
#cslider{
  padding:100px;
}

＆＃13;

Answer 5

您可以使用不透明度和可见性来执行此操作，在CSS中使用此属性处理动画会更容易。您可以添加X或Y，甚至3D的变换。这是代码：

#cslider .control_next, #cslider .control_prev {
   opacity: 0;
   visibility: hidden;
   transition: all .3s ease;
}

#cslider:hover .control_next, #cslider:hover .control_prev {
   opacity: 1;
   visibility: visible;
}

使用css在父div上悬停/淡出元素

5 个答案: