懸停3個盒子沒有按預期工作

Question

我有3個盒子，當你懸停它會顯示它的描述。我的代碼正常工作正常。然而，我想讓我的jQuery代碼更短，所以我修改了它，但它不會按預期工作，我沒有看到代碼的任何區別。

這裏是HTML的一部分：

<div id="opf-container"> 
 
<div class="s-box-container"> 
 
\t <div class="s-box" id="cc-home-pr"> 
 
\t \t <div class="normal" style="display: block;"> 
 
\t \t \t <span><h2>xxx</h2></span> 
 
\t \t </div> 
 
\t \t <div class="hover" style="display: none;"> 
 
\t \t <h2>xxx</h2> 
 
\t \t <hr class="hr-mid"> 
 
\t \t <p>lorem epsum</a></span></p> 
 
\t \t <a href="#" id="btn2-lm" class="btn2">LEARN MORE</a> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
<div class="s-box-container"> 
 
\t <div class="s-box" id="cc-home-ps"> 
 
\t \t <div class="normal" style="display: block;"> 
 
\t \t \t <span><h2>xxx</h2></span> 
 
\t \t </div> 
 
\t \t <div class="hover" style="display: none;"> 
 
\t \t \t <h2>xxxx</h2> 
 
\t \t \t <hr class="hr-mid"> 
 
\t \t \t <p>lorem epsum</a></span></p> 
 
\t \t \t <a href="#" id="btn2-lm" class="btn2">LEARN MORE</a> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
<div class="s-box-container"> 
 
\t <div class="s-box" id="cc-home-ft"> 
 
\t \t <div class="normal" style="display: none;"> 
 
\t \t \t <span><h2>xxx</h2></span> 
 
\t \t </div> 
 
\t \t <div class="hover" style="display: block;"> 
 
\t \t \t <h2>lorem epsum</h2> 
 
\t \t \t <hr class="hr-mid"> 
 
\t \t \t <p>lorem epsum<span class="highlight-w"><a href="#">Become a member</a></span> of the CardsChat forum to access exclusive freerolls and online poker games &amp; tournaments</p> 
 
\t \t \t <a href="#" id="btn2-lm" class="btn2">LEARN MORE</a> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
</div>

這裏是我的jQuery代碼：

var timer1; 
    $("#cc-home-pr").hover(function() { 
      clearTimeout(timer1); 
      $("#cc-home-pr .hover").fadeIn(300); 
      $("#cc-home-pr .normal").fadeOut(300); 
     }, function() { 
      boxId = '#' + $(this).attr('id'); 
      timer1 = setTimeout(function() { 
       $("#cc-home-pr .hover").fadeOut(300); 
       $("#cc-home-pr .normal").fadeIn(300); 
      }, 300); 
    }); 


    var timer2; 
    $("#cc-home-ps").hover(function() { 
      clearTimeout(timer2); 
      boxId = '#' + $(this).attr('id'); 
      $("#cc-home-ps .hover").fadeIn(300); 
      $("#cc-home-ps .normal").fadeOut(300); 
     }, function() { 
      boxId = '#' + $(this).attr('id'); 
      timer2 = setTimeout(function() { 
       $("#cc-home-ps .hover").fadeOut(300); 
       $("#cc-home-ps .normal").fadeIn(300); 
      }, 300); 
    }); 

    var timer3; 
    $("#cc-home-ft").hover(function() { 
      clearTimeout(timer3); 
      boxId = '#' + $(this).attr('id'); 
      $("#cc-home-ft .hover").fadeIn(300); 
      $("#cc-home-ft .normal").fadeOut(300); 
     }, function() { 
      boxId = '#' + $(this).attr('id'); 
      timer3 = setTimeout(function() { 
       $("#cc-home-ft .hover").fadeOut(300); 
       $("#cc-home-ft .normal").fadeIn(300); 
      }, 300); 
    }); 

jQuery代碼上述工作正常。我決定把它縮短所以我修改這樣的代碼：在代碼

var timerBox = []; 
$("div.s-box-container", this).hover(function() { 
     boxIndex = $(this).index(); 
     clearTimeout(timerBox[boxIndex]); 
     boxId = '#' + $(".s-box",this).attr('id'); 
     $(boxId + " .hover").fadeIn(300); 
     $(boxId + " .normal").fadeOut(300); 
    }, function() { 
     timerBox[boxIndex] = setTimeout(function() { 
      $(boxId + " .hover").fadeOut(300); 
      $(boxId + " .normal").fadeIn(300); 
     }, 300); 
}); 

然而，當將鼠標懸停一個框，然後其他的框不會恢復其原來的狀態，預計將無法正常工作。

Answer 1

嘗試通過內.S盒的id索引定時器的集合：

var timerBox = []; 
$("div.s-box-container").hover(function() { 
     var boxId = $(".s-box",this).attr('id'); 
     clearTimeout(timerBox[boxId]); 
     $("#" + boxId + " .hover").fadeIn(300); 
     $("#" + boxId + " .normal").fadeOut(300); 
    }, function() { 
     var boxId = $(".s-box",this).attr('id'); 
     timerBox[boxId] = setTimeout(function() { 
      $("#" + boxId + " .hover").fadeOut(300); 
      $("#" + boxId + " .normal").fadeIn(300); 
     }, 300); 
}); 

JSFiddle

編輯：從$("div.s-box-container")選擇刪除了this並增加了一個小提琴以供參考。