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> 上述内容具有一定的借鉴价值,感兴趣的朋友可以参考,希望能对大家有帮助。 (编辑:银川站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |