开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当鼠标悬停在对象上时,获取对象的"原始"(非悬停)背景颜色

当鼠标悬停在对象上时，获取对象的"原始"(非悬停)背景颜色可以通过JavaScript实现。首先，在CSS中为对象设置一个初始背景颜色，然后在JavaScript中使用addEventListener方法监听鼠标悬停事件，并在事件处理程序中获取对象的初始背景颜色。

以下是一个简单的示例：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>获取背景颜色</title>
   <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="box" id="myBox"></div>
   <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

const box = document.getElementById('myBox');
const originalBackgroundColor = getComputedStyle(box).backgroundColor;

box.addEventListener('mouseover', () => {
    console.log('原始背景颜色:', originalBackgroundColor);
});

在这个示例中，我们首先在CSS中为.box类设置了一个初始背景颜色#f0f0f0。然后，在JavaScript中，我们使用getComputedStyle方法获取了对象的初始背景颜色，并将其存储在originalBackgroundColor变量中。最后，我们为对象添加了一个mouseover事件监听器，当鼠标悬停在对象上时，会在控制台中输出原始背景颜色。

相关搜索:当鼠标悬停在对象上时，使对象出现当鼠标悬停在其他对象上时，Css列表消失在光标进入对象之前，当鼠标被按下时，如何检测光标悬停在对象上？当鼠标悬停在li: over上时，如何更改链接的颜色？当鼠标悬停在Tkinter中的按钮上时，如何改变颜色？当鼠标悬停在Tkinter的按钮上时，如何停止颜色的变化？当鼠标悬停在3个独立的磁贴/按钮上时，更改背景颜色和图像当鼠标悬停在名称上时更改下拉箭头的颜色 div中的CSS对象在悬停时移动如何使鼠标悬停时展开菜单上的背景颜色高度如何在材料ui卡中更改悬停时的文本颜色？我想在卡片悬停时更改文本颜色，而不是在文本上悬停？如何改变背景颜色蓝色到灰色选择<OPTION>标签时，特别是当鼠标悬停在选项上？当鼠标悬停在多线图上时，在圆圈中填充相同的线条颜色，当鼠标移出时，删除圆圈中的颜色尝试更改悬停时的选项背景颜色下拉选择在CSS中如何使菜单项的整个宽度在悬停时更改背景颜色？全日历当鼠标悬停在另一个事件上时更改事件的颜色当鼠标悬停在行上时，更改最后一个单元格的颜色，并将值考虑在内图像处理:在(相当)相同的背景颜色上检测对象的边界当我在非对象的类外部调用方法时，PHP调用非对象上的成员函数通过悬停或单击对象来获取类元素在类数组中的位置

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

没有搜到相关的视频

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭