只突出顯示所選元素，而不是其父母？

我有下面的代碼似乎工作，除了現在它突出顯示所有的父母時，鼠標是一個元素。我所期望的僅僅是鼠標移過來的元素將圍繞它繪製一個盒子，目前的解決方案是圍繞着元素以及它的所有祖先。只突出顯示所選元素，而不是其父母？

$("*").hover(
     function(e) { e.stopPropagation(); $(this).stop(true, true).addClass("highlight"); }, 
     function(e) { e.stopPropagation(); $(this).stop(true, true).removeClass("highlight"); } 
    );

CSS：

.highlight { 
-moz-box-shadow: inset 0 0 5px 5px #FF00FF; 
-webkit-box-shadow: inset 0 0 5px 5px #FF00FF; 
box-shadow: inset 0 0 5px 5px #FF00FF; 
}

這是怎麼回事，高亮邊框「堅持」即使我的鼠標不是集中在它的的jsfiddle。

http://jsfiddle.net/NE66P/419/

來源

2014-01-27 KJW

使用純CSS沒有任何JavaScript。

table:hover { 
    border: 1px solid #000; 
}

或者你想這個應用到表格單元格（<td>），而不是整個表，這樣做：

table td:hover { 
    border: 1px solid #000; 
}

來源

2014-01-27 21:21:58 Blazemonger

您需要使用傳遞進來的第一個參數事件對象的懸停功能，以阻止事件傳播。我還沒有測試過，但它應該工作：

$(document).ready(function() { 
    $("*").hover(
     function(e) { e.stopPropagation(); $(this).addClass("Hover"); }, 
     function(e) { e.stopPropagation(); $(this).removeClass("Hover"); } 
    ); 
});

來源

2014-01-27 21:23:06

這個工程，但問題是，類似乎「棍」後，我的鼠標已經離開了。當我移動鼠標時，某些元素似乎仍然保留邊框，直到我再次移動它。 – KJW

爲什麼你不使用純粹的CSS？

*:hover 
{ 
    //some code 
} 

table:hover 
{ 
    border: 1px solid #000; 
}

來源

2014-01-27 21:24:55

只突出顯示所選元素，而不是其父母？

回答

相關問題