Jquery MouseOver事件 - 儿童隐形

我正在编写一些模仿大多数浏览器具有的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，使鼠标悬停在孩子的时候，子元素也被 '检查'？

谢谢！

来源

2017-04-08 Ryan Castle

你想要的HTML中检查 –

是HTML：P –

是的，这是在追加到行HTML是检查颜色元件。 –

使用prependTo而不是appendTo

$('body *').on('mouseover', function(e) { 
 
    if ($(e.target).closest('.inspect_hover').length == 0) { 
 
    $('<div class=\'inspect_hover\'></div>').prependTo(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>

来源

2017-04-08 10:28:12 LGSon

简单的事情！谢啦！ –

@RyanCastle经常这样.. :) ...不客气 – LGSon

Jquery MouseOver事件 - 儿童隐形

回答

相关问题