2
我正在編寫一些模仿大多數瀏覽器具有的F12檢查工具的代碼。當鼠標懸停在某個元素上時，div會添加一個半透明的藍色，表示它已被選中：Jquery MouseOver事件 - 兒童隱形
我遇到的問題是將光標移到「已檢查」元素的子元素上時，子元素實際上並沒有得到徘徊：
之前哈弗：
後哈弗：
這裏是我的代碼（JS Bin）：
$('body *').on('mouseover', function(e) {
if ($(e.target).closest('.inspect_hover').length == 0) {
$('<div class=\'inspect_hover\'></div>').appendTo(e.target);
}
}).on('mouseout', function(e) {
var mouse = [e.pageX, e.pageY];
var min = [$(e.target).offset().left, $(e.target).offset().top];
var max = [($(e.target).offset().left + $(e.target).width()), ($(e.target).offset().top + $(e.target).height())];
if (!(mouse[0] >= min[0] && mouse[0] <= max[0]) || !(mouse[1] >= min[1] && mouse[1] <= max[1])) {
$('div.inspect_hover').remove();
}
});.header {
position: absolute;
width: 400px;
height: 200px;
left: 20px;
top: 20px;
background-color: #efefef;
border: 1px solid rgba(0, 0, 0, 0.125);
}
.header h3 {
position: relative;
display: block;
width: 100%;
height: 40px;
line-height: 40px;
top: 40px;
left: 0px;
text-align: center;
margin: 0px 0px 0px 0px;
}
.inspect_hover {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
margin: 0px 0px 0px 0px;
background-color: rgba(126, 103, 238, 0.125) !important;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div class='header'>
<h3>Hello, World</h3>
</div>
</body>
</html>我怎麼會改變我的JS，使鼠標懸停在孩子的時候，子元素也被 '檢查'？
謝謝！
你想要的HTML中檢查 –
是的，這是在追加到行HTML是檢查顏色元件。 –