我们有一个书签，用户点击一个按钮，需要像 highligther 这样的检查。我们希望这是跨浏览器。
为此，我们需要在鼠标移动期间检测 DOM 元素，一旦我们有了这个元素，我们就需要用 CSS 突出显示。
我们在通过鼠标移动检测 DOM 元素时遇到问题，您能指导我们如何完成吗？
一旦我们有了这个 DOM 元素，在用户点击时我们需要提取 XPath。
【问题讨论】：
标签： javascript html dom bookmarklet highlight
您可以将mousemove 挂接到document 或document.body，然后使用事件对象的target 属性找出鼠标所在的最顶层元素。然后将 CSS 应用到它可能最容易通过添加一个类来完成。
但我想知道:hover psuedo-class 是否可以为您节省一些麻烦...
如果不使用:hover，这里有一个例子：
(function() {
var prev;
if (document.body.addEventListener) {
document.body.addEventListener('mouseover', handler, false);
}
else if (document.body.attachEvent) {
document.body.attachEvent('mouseover', function(e) {
return handler(e || window.event);
});
}
else {
document.body.onmouseover = handler;
}
function handler(event) {
if (event.target === document.body ||
(prev && prev === event.target)) {
return;
}
if (prev) {
prev.className = prev.className.replace(/\bhighlight\b/, '');
prev = undefined;
}
if (event.target) {
prev = event.target;
prev.className += " highlight";
}
}
})();
【讨论】：
:hover 确实适用于 IE7 或更高版本中的任何元素（不适用于 IE6，它仅在锚点上支持它）。但我必须仔细考虑如何构建 CSS。只是body *:hover { ... } 可能不会这样做，如果您只想突出显示鼠标悬停的 topmost 元素...
在 jquery 的帮助下你可以做这样的事情
$('*').hover(
function(e){
$(this).css('border', '1px solid black');
e.preventDefault();
e.stopPropagation();
return false;
},function(e){
$(this).css('border', 'none');
e.preventDefault();
e.stopPropagation();
return false;
}
);
在您的书签中使用此代码，您可以加载任何代码
javascript:function loadScript(src){f=document.createElement('script');if(f){f.setAttribute("type","text/javascript");f.setAttribute("src",src);document.getElementsByTagName("head")[0].appendChild(f);}};loadScript("yourscripturl");
【讨论】：
yourscripturl