jquery - .hover() の使用時に setInterval() 関数を停止しますか?

Question

4 つの div の 1 つを強調表示してから次の div に進む setInterval() 関数があります。サイクル全体が繰り返され、そうするのに 4 秒かかります。しかし、div の 1 つの上にカーソルを置いて、カーソルを置いている div を強調表示すると、setInterval() 関数を停止する関数を作成したいと考えています。div を離れると、setInterval() 関数が再び開始されます。

HTML:

<div class="content color">
<p>Hello</p>
</div>

<div class="content ">
<p>Ola</p>
</div>

<div class="content ">
<p>Namaste</p>
</div>

<div class="content ">
<p>See Ya!</p>
</div>

JQuery:

 function loopy(){
    var items  = $(" .content");
    var length = items.length;

    items.each(function(i, ele) {
        if ($(ele).hasClass("color")) {
            $(ele).animate({opacity: 0.5},500).removeClass("color");

            if (i < (length-1)) {

                $(items[i+1]).animate({  opacity: 1},500).addClass("color");

            }
            else {
                $(items[0]).animate({ opacity: 1},500).addClass("color");
            }

            return false;
        }
    });

function CF()
{
    window.setInterval(function(){loopy();},4000);
}

CF();

setInterval() 関数を含む関数として CF() を作成しました。「コンテンツ」クラスで .hover() 関数を作成するときに CF() を停止する方法がわかりません。そして、マウスが「コンテンツ」クラスにホバリングしなくなると、CF() が再び開始されます。