我正在尝试构建一个迷你检查器工具,它只是报告悬停的元素,它的ID以及它拥有的任何类。
我构建了一个包含4个嵌套元素的演示页面:
html>身体> outerContainer> innerContainer
我设法让它以时尚的方式工作,它从外部元素到内部元素时正确地报告信息,但是当反向时,报告的元素是前一个元素。
要查看它的实际效果 - http://jsfiddle.net/sygad/kmJ5s/
<head>
<meta charset="utf-8">
<title>Element Hover</title>
<style>
html {margin:0; padding:40px 20px 0; background:#333; font:0.9em/1.1em "Arial", sans-serif}
body {margin:0; padding:0 0 10px; background:#555}
#outerContainer {margin:20px; padding:0; background:#777; width:240px; height:260px;}
#innerContainer {margin:20px; padding:0; background:#999; width:200px; height:200px;}
p#info {position:absolute; top:0; left:0}
p {margin:0; padding:0; color:white}
</style>
</head>
<body>
<p id="info">Current element: <span></span></p>
<p>Body</p>
<div id="outerContainer">
<p>Outer</p>
<div id="innerContainer">
<p>Inner</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
//Initialise
var nodeName = '';
var ids = '';
var classes = '';
$('*').hover(function(e)
{
//Clear
nodeName = '';
ids = '';
classes = '';
nodeName = $(this).context.nodeName.toLowerCase();
if ($(this).attr('id') != undefined)
{
ids = ' #' + $(this).attr('id');
}
if ($(this).attr('class') != undefined)
{
classes = ' .' + $(this).attr('class');
}
$('p#info span').text(nodeName+ids+classes)
})
</script>
</body>
答案 0 :(得分:3)
尝试使用$(e.currentTarget)
代替$(this)
答案 1 :(得分:2)
你需要照顾以下项目,
onmousemove
,因为当您从父项移动子元素并保留子元素时,它将不会更新父项,因为您永远不会进入/离开父元素。e.target
代替this
DEMO: http://jsfiddle.net/kmJ5s/8/
var nodeName = '';
var ids = '';
var classes = '';
$('*').mousemove(function(e) {
nodeName = '';
ids = '';
classes = '';
var _this = e.target;
nodeName = _this.nodeName.toLowerCase();
if (_this.id) {
ids = ' #' + _this.id;
}
if (_this.className) {
classes = ' .' + _this.className;
}
$('p#info span').text(nodeName + ids + classes)
});