iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >javascript学习笔记(二) 鼠标经过时,改变div块的背景色的代码
  • 400
分享到

javascript学习笔记(二) 鼠标经过时,改变div块的背景色的代码

div背景色 2022-11-21 22:11:03 400人浏览 泡泡鱼
摘要

html部分代码: <ul> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> <l

html部分代码:

<ul>
<li>鼠标经过时改变背景色</li>
<li>鼠标经过时改变背景色</li>
<li>鼠标经过时改变背景色</li>
<li>鼠标经过时改变背景色</li>
</ul>

javascript部分代码:
当鼠标经过时,给li添加class="current"类,鼠标离开时,去除该类,达到改变背景色的目的

window.onload = function() {
var lis = document.getElementsByTagName("li");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover = function() {
this.setAttribute("class", "current");
}
lis[i].onmouseout = function() {
this.setAttribute("class", "");
}
}
}

CSS部分代码:

ul li.current {
background-color:red;
cursor:pointer;
}

上面的代码,主要是方便大家更多的认识js,下面提供一个css实现的版本。

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

--结束END--

本文标题: javascript学习笔记(二) 鼠标经过时,改变div块的背景色的代码

本文链接: https://www.lsjlt.com/news/173170.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作