加入收藏 | 设为首页 | 会员中心 | 我要投稿 银川站长网 (https://www.0951zz.com/)- 云通信、基础存储、云上网络、机器学习、视觉智能!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

JS中怎样实现鼠标悬停变色 代码怎样编辑

发布时间:2023-07-10 13:13:00 所属栏目:语言 来源:
导读:今天我们来学习关于“JS中怎样实现鼠标悬停变色,代码怎样写?”的内容,下文有详解方法和实例,内容详细,逻辑清晰,有需要的朋友可以参考,希望大家阅读完这篇文章后能有所收获,那么下面就一起来了解一

今天我们来学习关于“JS中怎样实现鼠标悬停变色,代码怎样写?”的内容,下文有详解方法和实例,内容详细,逻辑清晰,有需要的朋友可以参考,希望大家阅读完这篇文章后能有所收获,那么下面就一起来了解一下吧。

思想:对于上一级元素、父元素实现下级元素、子元素变色。仅需 :hover 及 css 选择器便可完成。下级元素对上级操作,现使用 JavaScript 中 onmouseover、onmouseout 事件

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>

上述内容具有一定的借鉴价值,感兴趣的朋友可以参考,希望能对大家有帮助。

(编辑:银川站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!