jQuery的 - 鼠標懸停

同一類的嵌套的div的變化邊框顏色

我的HTML包含一系列嵌套的div的，每個都具有相同的類（「殼」），但唯一的ID。jQuery的 - 鼠標懸停

<div class="shell s01" id="blah"> 
    <!-- s01 content --> 
    <div class="shell s02" id="bar"> 
     <!-- s02 content --> 
     <div class="shell s03" id="wah"> 
      <!-- s03 content --> 
     </div> 

     <div class="shell s03" id="foo"> 
      <!-- s03 content --> 
     </div> 
    </div> 
</div>

我想一個div當鼠標進入它改變的邊框顏色，但是當鼠標進入一個子DIV它應該返回到原來的顏色。下面的jQuery代碼將邊框顏色更改爲藍色，但是在鼠標進入子div時不會將父div邊框返回原始顏色（＃8E8DA2）。相反，當把鼠標放在內部div上時，它和它的所有祖先都會突出顯示。例如，如果懸停在「wah」上，則「blah」和「bar」也會突出顯示。我想要「blah」和「bar」恢復原來的邊框顏色。

我明白，當鼠標懸停在兒童身上時，它也會覆蓋孩子的父母。但我不確定爲什麼下面的「父母」聲明不能解決問題。

$('.shell').mouseover(function() { 
    $(this).parent('.shell').css('border-color', '#8E8DA2'); 
    $(this).css('border-color', '#0000FF'); 
}); 

$('.shell').mouseout(function() { 
    $(this).css('border-color', '#8E8DA2'); 
});

任何想法？謝謝！

來源

2011-03-10 Fred Mars

其中一個方案是要在單元格的當前邊框顏色存儲在一個變量，那麼一旦鼠標離開小區復位。

從上面的代碼，它看起來好像顏色要返回它是一致的，所以你可能只將其存儲在其自己的變量到。

你可以重構你的代碼一點點，做這樣的事情：

var sOriginalColor = '#8E8DA2'; 
$('.shell') 
.mouseover(function(evt) { 
    evt.preventDefault(); // specified for purposes of example mentioned in the comments 
    $(this).parent('.shell').css('border-color', sOriginalColor); 
    $(this).css('border-color', '#0000FF'); 
}) 
.mouseout(function() { 
    $(this).parent('.shell').css('border-color', sOriginalColor); 
    $(this).css('border-color', sOriginalColor); 
});

誠然，我跑了你的代碼，但我不能完全肯定，我所提供的解決方案是你是什麼尋找，因爲有是一些與事件冒泡有關的行爲發生。

如果這是您遇到什麼，然後讀取quirks mode article on events可以幫助你找出什麼事。

來源

2011-03-10 14:55:39 Tom

非常感謝！檢查出你鏈接的文章後，我發現[這篇文章在stackoverflow]（http://stackoverflow.com/questions/1327711/jquery-hover-event-with-nested-elements）有一個工作解決方案。現在我需要閱讀有關stopPropagation方法的信息，以瞭解其工作原理。 – 2011-03-10 15:29:19

@Fred Mars你可以在jQuery中的事件處理程序中輕鬆停止傳播。在函數中，例如指定e參數，然後調用e.preventDefault（）。我已經更新了我的答案，只是一個例子。 – Tom 2011-03-10 15:54:00

這應該做的伎倆

$('.shell').mouseenter(function() { 
    $(this).parent('.shell').css('border-color', '#8e8da2'); 
    $(this).css('border-color', '#00f'); 
}); 

$('.shell').mouseleave(function() { 
    $(this).parent('.shell').css('border-color', '#00f'); 
    $(this).css('border-color', '#8e8da2'); 
});

所以首先，你需要使用的mouseenter和鼠標離開，因爲他們沒有泡沫了，只有他們連接到獲得該事件的特定元素。另外，在休假時，您需要給父母以「高亮」顏色，因爲當您離開孩子時，最終會在父母身上結束。沒有這一點，父母會保持默認顏色，因爲mouseenter在這種情況下不會觸發 - 似乎讓孩子不會觸發父母的輸入，所以您必須手動完成。

來源

2011-03-10 15:33:15 ilia

謝謝你們 - 對不起，我還沒有足夠的代表尚未投票答案。

我this other stackoverflow question找到了工作方案。關鍵是在mouseover事件上調用stopPropagation（）方法。

$('.shell').mouseover(function(e) { 
    e.stopPropagation(); 
    $(this).css('border-color', '#0000FF'); 
}) 

$('.shell').mouseout(function() { 
    $(this).css('border-color', '#8E8DA2'); 
});

來源

2011-03-10 15:45:39

你應該有足夠的時間。 – jjnguy 2011-03-10 19:40:21

jQuery的 - 鼠標懸停

回答

相關問題