ホバーされている要素、そのID、およびそれが持つクラスを単に報告するミニインスペクターツールを構築しようとしています。
html > body > outerContainer > innerContainer の4 つのネストされた要素を持つデモ ページを
作成しました。
私はそれをうまく機能させることができました。外側の要素から内側の要素に移動すると情報が正しく報告されますが、逆に移動すると、報告された要素は前のものになります。
実際の動作を確認するには - 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>