在javascript中悬停后更改背景颜色

2024-03-08

我需要在 Javascript 中更改悬停背景颜色

function changeColor(color) {
var block = document.getElementsByClassName('kafelek');
for (var i = 0; i < block.length; i++) {
    block[i].style.backgroundColor = "#" + color;
}};

在此代码中,我在单击后更改块的颜色,但我也需要在悬停后更改块的颜色。

<div class="kolorek" onclick="changeColor('2ecc71');" style="background-color:#2ecc71;"></div>

也许尝试一下mouseleave event:

element.addEventListener("mouseleave", function( event ) {   
    event.target.style.backgroundColor = "purple";
}

另外,如果你希望它仅在鼠标位于元素上时改变,你最好使用 css:hover,像这样:

element:hover {
    background-color: #yourcolor;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在javascript中悬停后更改背景颜色 的相关文章

  • 在 angularjs 模块初始化期间有条件地注入依赖项

    我有一个角度模块 我想有条件地将依赖项注入其中 IE var myapp angular module myapp ngRoute myappcontroller ngGrid I want to include ngGrid only i
  • Webpack 和 Angular HTML 图像加载

    我一直对 webpack 和 Angular 感到头疼 这可能有一个简单的答案 但我无法弄清楚 我已经阅读了堆栈溢出中关于这个主题的几乎所有答案 但都无济于事 我有一个像这样的 html 页面 还有其他包含图像的模板 img
  • Amcharts 图表 - 图表列到自定义 URL 的超链接以在新选项卡/窗口中打开

    我正在尝试制作一个 amcharts 图表 其中的列链接到自定义网址 并希望网址在新选项卡 窗口中打开 我尝试将此代码添加到图形对象中 但它不起作用 它在同一选项卡 窗口中打开链接 listeners event clickItem met
  • JavaScript 原型 - 请澄清

    有人可以帮我理解原型属性吗 我不明白原型属性是函数的属性还是函数内部的属性 假设我们创建以下构造函数 Food 此时 函数 Food 具有 Food prototype 属性 由于 Food 是 Object 的实例 因此这意味着 Obec
  • 数据表“footerCallback”函数未在页脚中显示结果

    我尝试获取每列的总和并将结果显示在页脚中 我在用着 页脚回调 https datatables net reference option footerCallbackDatatables提供的功能 但是它在页脚中没有显示任何内容 数据表解释
  • Javascript:通过将路径作为字符串传递给对象来获取对象的深层值[重复]

    这个问题在这里已经有答案了 可能的重复 使用字符串键访问嵌套的 JavaScript 对象 https stackoverflow com questions 6491463 accessing nested javascript obje
  • AngularJS - 服务、工厂、过滤器等中的依赖注入

    因此 我想在我的 Angular 应用程序中使用一些插件和库 目前 我只是引用这些函数 方法 因为它们是在 99 的应用程序中以完全忽略依赖注入的方式使用的 我有 例如 javascript 库 MomentJS 它处理格式化和验证日期 并
  • 在 jQuery 中获取 CSS 规则的百分比值

    假设规则如下 largeField width 65 有没有办法以某种方式恢复 65 而不是像素值 Thanks EDIT 不幸的是 在我的例子中使用 DOM 方法是不可靠的 因为我有一个导入其他样式表的样式表 因此cssRules参数以以
  • 当表格在 IE 中获得焦点时,表格滚动条会向上跳跃

    问题 我有一个table有包装的div with overflow y auto 一旦table获得焦点 滚动条向上跳 我怎样才能防止这种情况发生 我经历过这种行为IE9 不在 Chrome 中 请注意 我已添加tabindex到桌子上 以
  • 我可以在不使用 Jquery UI 的情况下获得 Jquery Pulsate Effect 吗?

    我遇到了由于某种原因无法使用 Jquery UI 的情况 我正在尝试在不使用 Jquery UI 的情况下获得 Jquery UI 脉冲效果 与此链接类似 http docs jquery com UI Effects Pulsate ht
  • CSS:如何在模糊的背景上剪切文本?

    我想重新创建以下样式 我想出了以下内容 问题是剪切不会影响模糊滤镜 我不知道如何解决它 这是我的 HTML 代码 glass width 40 height 100 position absolute background rgba 255
  • selenium-webdriver 与 webdriverjs 有什么区别(以及何时使用)?

    我是一位使用 selenium webdriver 的经验丰富的专业人士 我正在探索有关如何测试 javascript 应用程序的更多选项 我发现了 webdriverJs 不幸的是 我不明白这两者 2 之间有什么区别 有人可以解释一下何时
  • Google 地图 InfoBubble PixelOffset(从标记上方的默认位置移动)

    我正在尝试实现一个自定义 infoBubble 它的框打开到标记的侧面 而不是顶部的默认位置 事实证明这比预期的要困难 使用普通的infoWindow 您可以使用pixelOffset 请参阅此处文档 https developers go
  • Promise 构造函数回调的主体何时执行?

    假设我有以下代码构造一个Promise function doSomethingAsynchronous return new Promise resolve gt const result doSomeWork setTimeout gt
  • d3力定向布局-链接距离优先

    在 d3 中使用力导向布局 如何使链接距离成为优先事项 同时仍然保持良好的图形布局 如果我指定动态链接距离 但保留默认费用 则我的图形距离会因费用函数而发生一些变形 并且不再是准确的距离 但是 如果我删除电荷 图表将如下所示 任何建议表示赞
  • MVC4 捆绑:由于 css3 功能而缩小失败?

    我想使用 MVC4 捆绑和缩小 但我总是在未缩小的 css 文件中收到此错误消息作为注释 Minification failed Returning unminified contents 534 29 run time error CSS
  • window.open 使用 css 样式

    我想设计我的 window open 目前 我的网页上有一些项目由于解析了某个类而打开 然后在新窗口中打开指定的文本 我想更改字体大小 字体和填充等 这是我的 JavaScript 代码
  • 无法从 JSON 请求获取数据,尽管我知道它已返回

    我试图获取从 getJSON 返回的数据 但我无法让它工作 我已经在 search twitter API 上尝试了相同的代码 效果很好 但它不适用于其他网站 我知道数据已返回 因为我在使用检查器时可以找到它 我通过检查器找到的值是 id
  • 如何制作过期/签名视频嵌入网址

    我是新来的 正在学习网络开发等等 我只知道如何将我的视频嵌入网站中 任何菜鸟都可以轻松获得源代码 他们也可以嵌入它 但在许多网站中 视频 src 均使用重定向器链接进行编码 例如 它会在一段时间后过期 在本例中是一天 我了解到这是一个签名网
  • R闪亮:使用闪亮的JS从数据表中获取信息

    我想读出所有列名称以及它们在数据表中显示的顺序 由于不同的原因 我无法使用 stateSave 等选项 我对 JS 没有什么把握 但我确信用它可以完成 所以我需要你帮助我 我尝试过类似的代码片段 datatable data callbac

随机推荐

  • Gradle 测试命令未运行任何测试

    我有一个可以在 Android Studio 上运行的简单测试实现 这个类位于我的项目的 src androidTest 目录中 应用程序测试 java public class ApplicationTest extends Applic
  • 通过开始和结束索引抓取 List 的一部分

    这可能吗 例如 如果我有 List
  • 使用 C、gcc、C99 和宏优化微控制器的简约 OOP

    我经常必须用 C 语言对微控制器进行编程 因为 C 编译器通常不可用 或者由于各种错误而无法编写极小的代码 但很多时候 OOP 语法糖 在使硬件程序封装得更清晰 易于维护方面非常方便 所以我想找出是否有一种方法可以在 C 中执行 OOP 语
  • Objective-C 如何检查字符串是否为空

    所以 我想检查我的数组中是否有该项目 clientDataArray objectForKey ClientCompany is nil temp clientDataArray objectForKey ClientCompany if
  • 如何用PHP生成随机密码?

    或者有没有自动生成随机密码的软件 只需构建一串随机数a z A Z 0 9 或者任何你想要的 直到所需的长度 这是 PHP 中的示例 function generatePassword length 8 chars abcdefghijkl
  • 为restify.js 实现基于令牌的身份验证的最佳方法是什么?

    我正在尝试使用restify js 构建一个RESTful api 但我不想将该api 暴露给所有人 我将使用基于令牌的身份验证 我脑子里的流程是这样的 不知道是否合理 用户将用户名 密码发送到 api 来获取令牌 此令牌应包含在调用所有其
  • Python 对新实例的交替引用

    这些天我一直在玩Python 我意识到Python如何将id 地址 分配给新实例 int和list 的一些有趣的方式 例如 如果我继续使用一个数字 或两个不同的数字 调用 id 函数 它会返回相同的结果 例如 gt gt gt id 123
  • 使用 JSON 键作为嵌套 JSON 中的属性

    我正在 python 2 7 中使用嵌套的类似 JSON 的数据结构 我与一些外国 perl 代码进行交换 我只是想以更Pythonic的方式 处理 这些列表和字典的嵌套结构 所以如果我有这样的结构 a x 4 y 2 3 a 55 b 6
  • 表格视图单元上的步进器(快速)

    我将步进器的出口和操作放入表格视图单元格中 并使用协议委托将其连接到表格视图 当我点击第一行中的步进器时 步进器值在第一行中正常显示 但它也出现在某个随机行中 如何解决这个问题 表格视图单元格 protocol ReviewCellDele
  • WPF 工具包数据网格 - 自定义选项卡

    我有一个包含 3 列的 WPF 工具包 DataGrid 只有第三列允许数据输入 前两列是静态的 文本描述 是否可以控制选项卡和导航 以便选项卡和上下左右按钮将忽略前两列并在第三列的范围内运行 您可以使用以下命令禁用前两列上的制表符IsTa
  • oracle FOR LOOP 不在 SYS_REFCURSOR 中迭代

    程序如下 打开游标 然后通过批量收集获取选择查询的输出 问题是所有 ID 都存储在批量收集中 但我无法使用批量收集变量作为输入来循环第二个选择查询 它只考虑第一个 ID 而不是全部 输出应该是 SYS REFCURSOR 请说明我在这里缺少
  • 使用layout/main.xml 文件将选项卡添加到Android 应用程序

    我从 Android 开始 想向现有应用程序添加选项卡 现在我只有一项活动 其布局是在 XML 文件中定义的 我现在想添加其他选项卡 我查了一下发现http developer android com resources tutorials
  • 如何让 Holo Light 主题在我的 Xamarin 应用程序中工作

    我正在尝试让我的应用程序使用 Holo Light 主题 我为 Holo 创建了一个自定义主题并将其放入 资源 values v11 Fsd Theme xml
  • 如何提取 docker 镜像的所有替代标签?

    我使用构建管道管理 gitlab 所有组件都封装在来自官方 gitlab 维护者的 docker 镜像中 每当我更新时 通常每周一次 我需要检查 gitlab gitlab runner helper 是否仍然适用于当前最新版本的 gitl
  • PhpMailer 不发送邮件 - TLS 错误?

    我在使用 phpmailer 发送电子邮件时遇到问题 发送电子邮件的代码是 mail User email protected cdn cgi l email protection mail Password My Password mai
  • 为什么 Chrome 需要 12 秒来更新图层树?

    我有一个相对不复杂的 ASP Net 应用程序 它偶尔会在层中显示一条警报消息 带有阴影 并带有一个按钮来消除通知 这段代码多年来一直运行良好 最近 我收到用户抱怨响应速度非常慢 他们的体验是页面完全没有响应 并且当他们单击 确定 按钮时很
  • 如果在某些输入之后使用 getline() 则不起作用[重复]

    这个问题在这里已经有答案了 可能的重复 需要有关 getline 的帮助 https stackoverflow com questions 1744665 need help with getline getline 不起作用 如果我在一
  • 为什么 var 在“foreach (var row in table.Rows)”中计算结果为 System.Object?

    当我输入这个foreach陈述 foreach var row in table Rows var 的工具提示说class System Object 我很困惑为什么不是class System Data DataRow 如果你想知道 是的
  • Java - 从 Jar 文件创建类

    是否可以从 jar 文件加载类 然后从中创建对象 注意 jar文件在程序编译时并不存在 而是用户后来添加的 并在用户启动程序时加载进来的 我的代码是这样的 用户有一个 jar 文件 里面只有一个已编译的 java 类 然后 用户将此 jar
  • 在javascript中悬停后更改背景颜色

    我需要在 Javascript 中更改悬停背景颜色 function changeColor color var block document getElementsByClassName kafelek for var i 0 i lt