Stop loop and fade in area that is hovered on

I have a bit of javascript/jquery I am trying to figure out. What I have already is one container box that the content fades in and out and loops through the three and repeats. What I am trying to do is when "box x" is hovered over the loop fades out and stops never to start again, and the box that is hovered on, the content below the box fades in and stays (box 1 and content 1)... unless another box is hovered over, then the content that faded in from the other hovered box will fade out and the new box that was hovered on, the content that coincides with that box fades in and stays fade in, and so forth. Box 1 with content 1, box 2 with content 2, and box 3 with content 3. Thanks for any help

Here is a code pen with an example: http://codepen.io/anon/pen/mzefa

var infoboxes = $(".count p");
var counter = 0;

function rotate() {
    $(infoboxes[counter]).fadeIn(1000, function() {
        setTimeout(function() {
            $(infoboxes[counter]).fadeOut(1000, function() {
                counter = counter < infoboxes.length - 1 ? counter + 1 : 0;
                rotate();
            })
        }, 3000);
    });
}

$(function() { 
    rotate(); 
});