Add class to div in rotating carousel style

Question

I have 3 identical divs and I want to add a class to one of those divs every 5 seconds one a rotating carousel type thing.

The following JSFiddle is what I have atm and I want the :hover styles to to be added to one of those divs every 5 seconds in a rotating sequence but still work as an on hover; 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

What I don't get in the accepted answer is that the carousel doesn't pause when the mouse hovers over an item. This is very confusing, especially since the same style is applied. I would create a jQuery object of the rows and use the available jQuery functions to walk over/select them and apply the a class for the hover instead of using the css property.

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');
};

The carousel should keep the expected direction and move on from where the hover-style was last applied; from the hovered element (as this is the most natural behavior imho):

$('.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

Answer 2

Something like this ?

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);