Вариант с setInterval
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.wrap {
margin-top: 100px;
float: left
}
.item {
padding: 10px;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="wrap">
<span class="item">Item 1</span>
<span class="item">Item 2</span>
<span class="item">Item 3</span>
<span class="item">Item 4</span>
</div>
<script>
var divElem = document.querySelector('.wrap'),
spanElems = [].slice.call(document.querySelectorAll('.item')),
i = 0, prev = 0;
function changeSpanColor() {
spanElems[prev || 0].style.background = '';
spanElems[prev = i % spanElems.length, i++ % spanElems.length].style.background = 'red';
};
var intervalID = window.setInterval(changeSpanColor, 3000);
divElem.addEventListener('mouseover', function (event) {
clearInterval(intervalID);
});
divElem.addEventListener('mouseout', function (event) {
intervalID = window.setInterval(changeSpanColor, 3000);
});
</script>
</body>
</html>