javascript怎么实现鼠标悬停变色效果
javascript实现鼠标悬停变色的方法：1、元素绑定onmouseover事件，并设置事件处理函数；2、在事件处理函数中，使用“元素对象.style.颜色属性名="颜色值";”语句设置当触发悬停事件时，元素颜色改变效果。
本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。
思想：对于上一级元素、父元素实现下级元素、子元素变色。仅需 :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>
四、效果图
【相关推荐：javascript学习教程】
以上就是javascript怎么实现鼠标悬停变色效果的详细内容！
相关内容
-
5个有用的css函数（分享）
CSS包含了许多函数，而且它能够完成许多早期需要用JavaScript才能完成的事情。每年都有新的特性被添加进来，这让我们的开发更加轻松，也减少了对JavaScript的依赖。...
-
详解CSS3+SVG滤镜实现不规则边框的方法
本篇文章将介绍一种配合SVG滤镜实现各种不规则图形添加边框的小技巧。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。需求背景，给不规则图形添加边框在我们日常开发...
-
使用JS或CSS如何实现瀑布流布局，几种方案介绍
本篇文章带大家了解一下瀑布流布局，介绍一下三种靠谱JS方案，以及N种不靠谱CSS方案。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。本着实用精神，我们今天来分...
-
让人眼前一亮的五个前端小技巧
为了让大家编程更轻松一些，本挑选一些有用的但相对比较少见有用的技巧。废话不多说，开车了。1.快速隐藏要隐藏一个DOM元素，不需要JavaScript。一个原生的HTML属性就足...
-
如何实现炫酷的数字大屏
依托强大无远开发平台，可以快速实现带各种酷炫联动效果的数字化大屏。一起来看一下吧DEMO地址：https://previewer.wuyuan.io/p...配置地址：http...
-
如何使用纯CSS3创建炫酷的图像放大效果？
在文章《利用CSS3创建炫酷的三角背景图像》中，我们介绍了利用CSS3创建炫酷的三角背景图像的方法，让网页显得高级感十足！这次我们来聊聊如何使用纯CSS3实现鼠标悬停图片放大特...
-
手把手教你使用CSS3实现按钮悬停闪烁动态特效
在之前的文章《纯CSS3怎么创建瀑布流布局？columns方法浅析》中，我们介绍了使用CSS3column系列属性创建瀑布流布局的方法，感兴趣的朋友可以去了解一下~而今天我们来...
-
CSS+JS实现爱心点赞按钮（代码示例）
本篇文章给大家介绍一下CSS+JS实现一个“爱之满满”点赞按钮的方法，希望对大家有所帮助！前段时间在看一档说唱节目，被里面的一个说唱歌手JBcob的爱之满满这句词给洗脑了。于是...
-
总结整理：需要避坑的五大常见css错误（收藏）
本篇文章给大家总结5个最常见的css错误，并介绍一下避坑方法，希望对大家有所帮助！正如我们今天所知，CSS语言是web的一个重要组成部分。它使我们有能力绘制元素在屏幕、网页或其...
-
css怎么实现鼠标移上去旋转效果
方法：1、用“@keyframes动画名{100%{transform:rotate(角度)}”创建旋转动画；2、用“元素:hover{animation:动画名时间linea...
