僅影響徘徊的孩子而沒有父母

Question

以下代碼在懸停時的每個DOM元素上添加了一個紅色陰影，如何僅標記該元素在光標下方？

$( "html *" ).hover(function() {
      $( this ).css('box-shadow','inset 0 0 3px red');
    }, function() {
      $( this ).css('box-shadow','none');
    }
  );
});

這是我的jsfiddle： https ://jsfiddle.net/eapo/7Lyt9qeb/2/

Answer 1

您想看一下document.elementFromPoint

使用mousemove事件， target就是您要追求的target

 document.body.addEventListener("mousemove",function(e){ // clear "hovered" class var elems = document.getElementsByClassName("hovered"); for(var a=elems.length-1; a>=0; a--){elems[a].classList.remove("hovered");} //add "hovered" class to target e.target.classList.add("hovered"); });

 div{ display:inline-block; outline: 1px solid; font-size:0px; width:50%; height:50%; } div.hovered{ background-color:rgba(255,0,0,0.5); } body{ width:400px; height:400px; }

 <body> <div> <div> <div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div> <div></div> </div> </div> </body>

Answer 2

建議不要添加:hover ，而是添加兩個委托的事件偵聽器：

一個mouseenter事件偵聽器，用於檢測元素何時進入元素。 它不會冒泡，因此只會在最深的懸停元素上調用。
mouseout事件偵聽器。 即使鼠標從元素移到后代，也會發生此事件。

 $("html").on('mouseenter', '*', function() { this.style.boxShadow = 'inset 0 0 5px red'; }).on('mouseout', '*', function(e) { this.style.boxShadow = ''; console.log(e.target); });

 body { width: 400px; } div { min-height: 20px; border: 1px solid; margin: 10px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div> <div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div> <div></div> </div> </div>

Answer 3

為此，無需使用JavaScript，就可以將css選擇器last-child和hover一起使用

body:last-child:hover {
    background: #ff0000;
}

編輯我誤解了您的問題，僅使用CSS是不可能的，這是獲得最深層元素的jQuery選擇器。

$('body *:not(:has("*"))');

僅影響徘徊的孩子而沒有父母

問題描述

3 個解決方案

解決方案1
2 已采納 2016-10-10 23:23:10

解決方案2
1 2016-10-10 23:33:15

解決方案3
0 2016-10-10 23:10:19

僅影響徘徊的孩子而沒有父母

問題描述

3 個解決方案

解決方案1 2 已采納 2016-10-10 23:23:10

解決方案2 1 2016-10-10 23:33:15

解決方案3 0 2016-10-10 23:10:19

解決方案1
2 已采納 2016-10-10 23:23:10

解決方案2
1 2016-10-10 23:33:15

解決方案3
0 2016-10-10 23:10:19