gpt4 book ai didi

JavaScript - 在悬停时突出显示一个元素

转载 作者:太空宇宙 更新时间:2023-11-04 13:50:29 25 4
gpt4 key购买 nike

我正在尝试编写一个 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);
});

Working Example here

这种方法的优点

它工作得很好。

这种方法的缺点

当我为现有的 DOM 元素添加边框时,它重新排列了页面上的元素,您可以观察到元素的轻微困惑效果。看起来不太好。

方法二

我希望突出显示是无缝的。也就是说,保留页面的外观并简单地在元素顶部覆盖高亮 mask 。

为此,在 mouseover 事件中,我动态创建了一个掩码元素,其 position 设置为 absolute 并且它的 co-坐标设置为目标元素的精确坐标。下面是我的代码:

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();
}
}
}

Working example here

这种方法的优点我觉得这样更优雅,不会打扰页面,只是在元素上覆盖了一个 mask 。

缺点

当用户将鼠标悬停在最顶部的容器 (div) 上时,它会为该元素创建一个掩码。之后,所有后续的 mouseover 事件都将被忽略,因为它们是在 mask 上注册的,而不是在实际的底层元素上。我需要想办法解决这个问题。

谁能帮助我改进方法 2?或者建议另一种方法?

谢谢,斯里拉姆

最佳答案

您应该在 CSS 而不是 JS 中执行此操作。使用 :hover 选择器

.your-class:hover{
background-color: #205081;
}

关于JavaScript - 在悬停时突出显示一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51925804/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com