鹿泽鹿泽  2024-04-07 11:28:54 鹿泽笔记 |  隐藏边栏 |  3 

javascript实现鼠标悬停变色的方法：1、元素绑定onmouseover事件，并设置事件处理函数；2、在事件处理函数中，使用“元素对象.style.颜色属性名="颜色值";”语句设置当触发悬停事件时，元素颜色改变效果。

javascript

onmouseover 事件会在鼠标指针移动到指定的元素上时发生。

onmouseout 事件会在鼠标指针移出指定的对象时发生。

HTML代码

<body>
<div id="A">
<div id="B">
鼠标移动到 A div 时，我要变色
</div>
</div>
<hr />
<div id="AB">
<div id="a">
一号 div
</div>
<div id="b">
二号 div
</div>
</div>
</body>

JavaScript代码

注：建议写在body的结束标签前

<script type="text/javascript">
	document.getElementById("b").onmouseover=function(){
		document.getElementById("a").style.backgroundColor="green";
	}
	document.getElementById("b").onmouseout=function(){
		document.getElementById("a").style.backgroundColor="red";
	}
</script>

CSS代码

<style type="text/css">
#A{
height: 400px;
width: 400px;
background-color: red;
}
#B{
height: 300px;
width: 300px;
background-color: green;
display: none;
}
#A:hover #B{
display: block;
}
#a{
height: 300px;
width: 300px;
background-color: red;
}
#b{
margin-left: 50px;
height: 300px;
width: 300px;
background-color: red;
}
#a:hover+#b {
background-color: green;
}
</style>
JavaScript
1、文章版权归作者所有，未经允许请勿转载。
2、本站所有文章，如无特殊说明或标注，均为本站原创发布。任何在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们邮箱：526009505@qq.com进行处理。
3、咨询请联系QQ：526009505

你可能也喜欢

热评文章

上一篇
下一篇