Question

我有3个相同的div，我想每隔5秒向其中一个div添加一个旋转旋转木马类型的东西。

以下的JSFiddle就是我所拥有的，我希望：hover样式在旋转序列中每隔5秒添加到其中一个div中，但仍然可以作为悬停工作; JSFiddle

   .action {
     padding: 10px 50px 10px 10px;
     background-color: #eaeaea;
     color: #525454;
   }
   .action:hover {
     background-color: #b5b5b5;
     color: #000;
   }
   .action h3 {
     margin: 0 0 10px 0;
   }
   .action .corner {
     position: absolute;
     width: 0;
     height: 0;
     border-bottom: 50px solid #db7575;
     border-left: 50px solid transparent;
     bottom: 0;
     right: 0;
   }
   .action:hover .corner {
     border-bottom: 50px solid #CC0000;
   }
   .action i {
     position: absolute;
     margin-left: -20px;
     margin-top: 27px;
     color: #fff;
   }

<div class="row">
  <a href="#">
    <div class="col-md-4 action">
      <h3> Title 1 </h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> <span class="corner "><i class="fa fa-arrow-right"></i></span> 
    </div>
  </a>
  <a href="#">
    <div class="col-md-4 action">
      <h3> Title 2 </h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> <span class="corner "><i class="fa fa-arrow-right"></i></span> 
    </div>
  </a>
  <a href="#">
    <div class="col-md-4 action">
      <h3> Title 3 </h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> <span class="corner "><i class="fa fa-arrow-right"></i></span> 
    </div>
  </a>
</div>

Answer 1

这样的东西？

http://jsfiddle.net/15od56d3/

CSS

.action:hover,.my_turn { background-color: #b5b5b5; color: #000;}

的Javascript

var myTurn = 0;
setInterval(function(){
    var i = 0;
    $(".action").each(function(){
        if(i==myTurn)
            $(this).addClass("my_turn");
        else
            $(this).removeClass("my_turn");
        i++;
    });
    myTurn = (myTurn + 1)%3  ;
},5000);

Answer 2

我接受的答案是，当鼠标悬停在某个项目上时，旋转木马不会暂停。这非常令人困惑，特别是因为应用了相同的样式。我将创建行的jQuery对象，并使用可用的jQuery函数来遍历/选择它们并将a类应用于悬停而不是使用css属性。

See the JSFiddle for a demo

var $rows = $('.action');
var $start= $rows.first(); // select one to start with (can be any of the elements in the set)
var $current = $start;
var interval;
var hover = function() {
    $current.removeClass('hover');
    $current = $rows.eq($rows.index($current)+1);
    if (!$current.length) {
        $current = $rows.eq($rows.index($start));
    }
    $current.addClass('hover');
};

旋转木马应保持预期的方向，并从最后应用悬停式的位置开始移动;来自悬停元素（因为这是最自然的行为）：

$('.action').mouseover(function() {
    window.clearInterval(interval);
    $current.removeClass('hover');
    $current = $(this).addClass('hover');
}).mouseout(function() {
    interval = window.setInterval(hover, 2000);
});
$start.addClass('hover').mouseout(); // apply the class immediately to the first row

在旋转轮播样式中将类添加到div

2 个答案: