使用js实现鼠标移入移出时背景色的切换效果

最新推荐文章于 2022-03-25 16:28:04 发布
最新推荐文章于 2022-03-25 16:28:04 发布
阅读量3.8k 收藏
点赞数
分类专栏： JavaScript 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yingziok888/article/details/50144205
版权
本文介绍了如何使用JavaScript实现鼠标移到元素上时改变背景色，离开时恢复原色的效果。通过定义`changeBG`和`changeBG2`两个方法，实现在`<li>`元素上的应用。此外，还提供了一种直接在标签内定义事件处理方法的实现方式。
摘要由CSDN通过智能技术生成

定义两个方法：

<script type="text/javascript">

/*设置导航栏处的鼠标移出和移入时背景色的变化  */
function changeBG(o) {
o.style.backgroundColor = "#5C75AA";
}
function changeBG2(o) {
o.style.backgroundColor = "";
}

</script>

在页面中的引用：

<ul class="home_navi">

最低0.47元/天 解锁文章
yingziok888
关注
专栏目录
html设置鼠标移入移出样式,鼠标移入移出_CSS3实现鼠标移入移出时改变样式的效果...
weixin_32667955的博客
06-04 3711
摘要 腾兴网为您分享:CSS3实现鼠标移入移出时改变样式的效果，壹学车，小猿口算，网易uu，万步有约等软件知识，以及山西个税，自动伴奏软件，成都农商银行app，儿歌千千，抖音群控系统，qq领赞，2017英语全国卷1,卓大师，康易，迎中秋庆国庆手抄报，公租房系统，万享，东台人，点云处理软件，影楼照片处理软件等软件it资讯，欢迎关注腾兴网。移入移出有效果我们通常会使用js或jquery来实现了，但是现...
js 实现 鼠标移入移出时颜色变化
03-31
js 实现 鼠标移入移出时颜色变化! 值得下载看看!资源免费,大家分享!!
js 当鼠标移动到表格一行上时，该行背景颜色改变
热门推荐
xyr05288的专栏
05-08 1万+
1. js，当鼠标移动到表格一行上时，该行背景颜色改变 var rows=document.getElementsByTagName('tr') for(var i=0;i<rows.length;i++){ rows[i].onmouseover=function(){ this.className+='highlight'; } rows[i].o
鼠标经过时改变DIV背景颜色的三种途径
huangcaiyan
08-25 2453
[size=x-large][b]方法一[/b][/size] [code]#div:hover{background:#000000;} [/code] 解释:鼠标经过id为div的元素时DIV背景变色 IE6.0、Firefox2.0、Opera9.23都不行 [size=x-large][b]方法二[/b][/size] [code] [/code] [...
JavaScript实现鼠标放上去之后高亮显示且隔行换色
穆雄雄的博客
11-02 454
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt; &l
鼠标移入移出事件模块
08-21
在IT领域，鼠标移入移出事件是用户交互设计中的基本元素，主要用于增强用户体验和实现特定功能。在本文中，我们将深入探讨“鼠标移入移出事件模块”的系统结构、核心概念以及如何在实际编程中应用这些事件。 一、...
javascript表格隔行变色加鼠标移入移出及点击效果的方法
10-24
本文将详细解析如何利用JavaScript实现表格隔行变色、鼠标移入移出以及点击效果，帮助开发者为用户提供更加直观、友好的界面。 首先，表格隔行变色是一种常见的视觉技巧，它通过改变奇偶行的颜色差异来防止用户在...
javascript学习实录 之七（实现鼠标移动上去后表格颜色变化）
05-03 337
废话不说，直接上代码，css部分，实在是无力，简单搞搞样式，意思到就好 [javascript] view plaincopy     "Content-Type" content="text/html; charset=utf-8" />              "text/css">          table {              border: blue s
导航栏鼠标移入变色
东北玛丽的CSDN
02-20 3389
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; body,ul{ padding: 0; margin: 0
JavaScript - 选项栏底色跟随鼠标移动而变化
Codefreyy
03-25 1703
//当鼠标经过某个li，就把current类（变红加下划线赋予给它） for (var i = 0; i < lis.length; i++) { var current = 0; //声明一个变量记录当前红色块的位置 lis[i].addEventListener('mouseenter', function () { move(cloud, this.offsetLeft);
js实现表格上鼠标移行换色
cnso2的专栏
12-19 722
<td onmouseover="this.style.background='#FBE17C';this.style.color='#000000'" onmouseout="this.style.background='#FAF2B1';this.style.color='#FAF291'" align=middle heigh
JavaScript-表格隔行换色·鼠标上移换色·合并显示
半吊子丶程序猿
09-20 253
HTML &lt;table id="tab1" border="1" width="800" align="center" &gt; &lt;tr&gt; &lt;td colspan="5"&gt;&lt;input type="button" value="添加"/&gt; &
网站导航标题栏下面有一小色块跟随鼠标移动，同时色块颜色改变的特效
你为什么不努力的专栏
05-08 5436
可能很多人看标题不是很明白这个特效，下面简述一下这个特效： 看到很多网站上的导航栏下面有一个小的色块，一开始小色块是处在第一个标题下面的，当鼠标移动到另一个标题时，这个小色块就会悠悠地跑到对应的标题下面。 这里截图只能看到色块是移动了，但现实不出色块是从Home下面平滑移动到Product下面的。反正就是这个意思了。大家看我上面的解释就知道了，不行看下面代码或者把代码拷贝运行一
css实现鼠标经过导航颜色变换效果
weixin_30545285的博客
11-12 531
css实现鼠标经过导航颜色变换效果，如下图： 1、先准备两张图片分别为：nav.jpg、hover.jpg，放到images文件夹里面。 2、准备一个index.html文档，该文档跟images评级，如下图： index.html的html代码 <div class="nv"> <ul> ...
javaScript点击鼠标改变背景颜色
heikerx的博客
08-16 3564
<script> function rgbToHex(r, g, b) { return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); } document.addEventListener('click',function(e){ //console.log(e.clientX); //console.log(e.clientY); c
html设置鼠标悬浮背景色,js设置鼠标悬停以更改背景颜色的详细说明
weixin_33273559的博客
06-04 2299
js设置鼠标悬停以更改背景颜色的详细说明更新时间：2019年6月26日10:20:42转载作者：Code fly`本文主要介绍js设置鼠标悬停以更改背景颜色的详细实现。本文通过示例代码进行了详细介绍，该示例代码对每个人的学习或工作都有一定的参考学习价值，需要的朋友可以参考我在Internet上看到了很多js鼠标悬停事件，其中大多数在说了这么多之后并没有解决问题，现在直接粘贴代码以供参考html：t...
html+js实现鼠标移入和移出的图片切换
lr_wlr_w的博客
01-08 4348
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
鼠标移入移出与多种Tab切换技巧解析
本文档详细介绍了几种不同的Tab切换方法，主要关注于鼠标移入移出切换的实现。在HTML和CSS代码中，我们看到了一个简单的布局，用于创建一个带有多个选项的Tab导航栏。以下是关键知识点的解析： 1. **HTML结构**： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值