javascript - JavaScript - 在悬停时突出显示元素
问题描述
我正在尝试编写一个 JavaScript,当用户将鼠标悬停在它上面时,它将突出显示 DOM 中的一个元素。这应该是一个跨浏览器的外部插件。理想情况下,我试图模仿浏览器检查器工具的行为。
我不能说我没有成功,但我被两种选择困住了,它们各有利弊。
方法一
我处理该mouseover
事件并简单地为目标元素添加一个边框。当我将鼠标悬停在另一个元素上时,我只是重置现有突出显示的元素。相同的代码如下:
function addHighlight(target) {
target.classList.add('highlighted');
}
function removeHighlight(target) {
target.classList.remove('highlighted');
}
window.addEventListener('mouseover',function(e) {
addHighlight(e.target);
});
window.addEventListener('mouseout',function(e) {
removeHighlight(e.target);
});
这种方法的优点
它工作得很好。
这种方法的缺点
当我为现有的 DOM 元素添加边框时,它会重新排列页面上的元素,您可以观察到元素的轻微洗牌效果。看起来不太好。
方法二
我希望突出显示是无缝的。也就是说,保留页面的外观并简单地在元素顶部覆盖一个高亮遮罩。
为此,在mouseover
事件中,我动态创建了一个掩码元素,该元素position
设置为absolute
,其坐标设置为目标元素的精确坐标。下面是我的代码:
window.addEventListener('mouseover',function(e) {
applyMask(e.target);
});
function applyMask(target) {
if(document.getElementsByClassName('highlight-wrap').length > 0) {
resizeMask(target);
}else{
createMask(target);
}
}
function resizeMask(target) {
var rect = target.getBoundingClientRect();
var hObj = document.getElementsByClassName('highlight-wrap')[0];
hObj.style.top=rect.top+"px";
hObj.style.width=rect.width+"px";
hObj.style.height=rect.height+"px";
hObj.style.left=rect.left+"px";
// hObj.style.WebkitTransition='top 0.2s';
}
function createMask(target) {
var rect = target.getBoundingClientRect();
var hObj = document.createElement("div");
hObj.className = 'highlight-wrap';
hObj.style.position='absolute';
hObj.style.top=rect.top+"px";
hObj.style.width=rect.width+"px";
hObj.style.height=rect.height+"px";
hObj.style.left=rect.left+"px";
hObj.style.backgroundColor = '#205081';
hObj.style.opacity='0.5';
hObj.style.cursor='default';
//hObj.style.WebkitTransition='top 0.2s';
document.body.appendChild(hObj);
}
function clearMasks() {
var hwrappersLength = document.getElementsByClassName("highlight-wrap").length;
var hwrappers = document.getElementsByClassName("highlight-wrap");
if(hwrappersLength > 0) {
for(var i=0; i<hwrappersLength; i++) {
console.log("Removing existing wrap");
hwrappers[i].remove();
}
}
}
使用这种方法的优点 我觉得这更优雅,并且不会干扰页面,只是在元素顶部覆盖一个蒙版。
缺点
当用户将鼠标悬停在最顶部的容器 ( div
) 上时,它会为该元素创建一个掩码。之后,所有后续mouseover
事件都将被忽略,因为它们注册在mask上,而不是实际的底层元素上。我需要想办法解决这个问题。
谁能帮助我更好的方法2?或者建议另一种方法?
谢谢,斯里拉姆
解决方案
您应该在 CSS 而不是 JS 中执行此操作。使用:hover
选择器
.your-class:hover{
background-color: #205081;
}
推荐阅读
- c# - xml序列化时排除根节点
- uwp - IoT Core UWP 应用程序在写入以停止 UHF 阅读器后挂在 DataReader.LoadAsync 上
- python - discord bot 删除消息,直到说出命令时的实际时钟上的特定时间
- azure - 将 Azure 流量管理器与应用服务 (HTTPS) 结合使用
- java - 为什么我会收到 NoSuchElementException?
- php - PhpStorm 多 docker 主机名解析
- python - 无法从 scrapy.CrawlerProcess 获取 Scrapy Stats
- node.js - npm 版本 -bash: /usr/bin/npm: 没有这样的文件或目录
- mysql - RT 4.0.3 到 4.4.3 由于 ACL 检查导致性能问题
- r - 时间序列格式:无法复制时间序列格式