,可以通过以下步骤实现:
<div id="div1"></div>
<div id="div2"></div>
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
document.addEventListener("mousemove", function(event) {
var x = event.clientX;
var y = event.clientY;
// 判断鼠标位置,控制div的显示和隐藏
if (x < div1.offsetLeft || x > div1.offsetLeft + div1.offsetWidth ||
y < div1.offsetTop || y > div1.offsetTop + div1.offsetHeight) {
div1.style.opacity = 0;
} else {
div1.style.opacity = 1;
}
if (x < div2.offsetLeft || x > div2.offsetLeft + div2.offsetWidth ||
y < div2.offsetTop || y > div2.offsetTop + div2.offsetHeight) {
div2.style.opacity = 0;
} else {
div2.style.opacity = 1;
}
});
通过以上代码,当鼠标移动到div1或div2的范围内时,对应的div将保持完全显示(不淡出),当鼠标移出范围时,div将淡出。
这种技术可以应用于各种场景,例如在网页设计中,可以用于创建交互效果,提升用户体验。在游戏开发中,可以用于实现角色或物体的跟随效果。在广告展示中,可以用于实现鼠标悬停时的动态效果。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云