onmouseover和onmouseout事件

最新推荐文章于 2022-09-28 17:52:00 发布

一个想做架构师的前端开发学生

最新推荐文章于 2022-09-28 17:52:00 发布

阅读量675

点赞数

分类专栏： javascript事件总结文章标签： javascript html5 css3 前端

本文链接：https://blog.csdn.net/m_ik_z/article/details/117075208

版权

javascript事件总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

onmouseover和onmouseout事件：

案例1：表格的隔行换色

style代码：

<style>
		*{
			margin: 0;
			padding: 0;
		}
		table{
			width: 80%;
			line-height: 50px;
			text-align: center;
			border: 1px solid #eee;
			margin: 50px auto;
			border-collapse: collapse;
		}
		th,td{
			border: 1px solid #eee;
		}
		.odd{
			background-color: skyblue;
		}
		.even{
			background-color: whitesmoke;
		}
	</style>

javascript详细代码：

// 遍历整个tbody中的tr，获取所有的tr。
		var trs = document.querySelectorAll('tbody tr')
		for(var i=0;i<trs.length;i++){
			if(i%2 == 0){
				trs[i].className = 'odd'
			}else{
				trs[i].className = 'even'
			}
			// 为tr注册 onmouseover 事件
			trs[i].onmouseover=function(){
				this.style.backgroundColor = '#ccc'
			}
			// 为tr注册 onmouseovut 事件
			trs[i].onmouseout=function(){
				this.style.backgroundColor = ''
			}
		}

上述代码实现效果如下：

案例2：切换图片

<body>
	<img src="1.jpg">
	<script>
		document.queryselector('button').onmouseover = function(){
			this.src = '2.png'
		}
		document.queryselector('button').onmouseout = function(){
			this.src = '1.jpg'
		}
	</script>
</body>

案例三：京东导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    
        body {
            background-color: #eee;
        }
    
        .nav {
            position: fixed;
            right: 10px;
            top: 50px;
            width: 60px;
            background-color: #fff;
        }
    
        .nav ul {
            list-style-type: none;
        }
    
        .nav li {
            padding: 10px 10px 5px 10px
        }
    
        .nav a {
            display: block;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
            color: #333;
            text-decoration: none;
            font-size: 14px;
        }
    
        /* .active {
            background-color: #e1251b;
            color: #fff;
        } */
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li><a href="#">京东秒杀</a></li>
            <li><a href="#">特色优选</a></li>
            <li><a href="#">频道广场</a></li>
            <li><a href="#">为你推荐</a></li>
        </ul>
    </div>
    <script>
        var lis = document.querySelectorAll('li')
        /*在循环当中，只是为每一个li标签注册onmouseover事件，但是事件中的代码
        只有当事件被处罚时才会执行*/
        for (var i = 0; i < lis.length; i++) {
            // 当鼠标进入元素时候触发这个事件
            lis[i].onmouseover = function () {
                this.style.backgroundColor = '#e1251b'
                // console.log(this.children[0]);
                this.children[0].style.color='#fff'
            }
            // 当鼠标从此元素上离开后触发
            lis[i].onmouseout=function(){
                this.style.backgroundColor = '#fff'
                // console.log(this.children[0]);
                this.children[0].style.color='#333'
            }
        }
    </script>
</body>
</html>

案例四：模块导航

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #eee;
        }

        .nav {
            position: relative;
            width: 500px;
            left: 400px;
            height: 300px;
            background-color: #fff;
        }

        .nav ul {
            float: right;
            list-style-type: none;
            height: 30px;
            /* border: 1px solid red; */
            overflow: hidden;
        }

        .nav li {
            float: left;
            margin: 0 13px;
            font-size: 14px;
            color: #333;
            padding-bottom: 2px;
            cursor: pointer;
        }

        .active {
            color: #e1251b !important;
            border-bottom: 2px solid #e1251b;
        }

        .content {
            position: absolute;
            top: 30px;
            width: 500px;
            height: 270px;
            text-align: center;
            line-height: 270px;
            /* border: 1px solid black; */
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li class="active">精选</li>
            <li>美食</li>
            <li>游戏</li>
            <li>家居</li>
            <li>宇宙飞船</li>
        </ul>
        <div class="content">
            
        </div>
    </div>
    <script>
        // 获取content
        var content = document.querySelector('.content')
        content.innerHTML='精选'
        // 获取所有li标签
        var lis = document.querySelectorAll('li')
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {
                // 将所有li标签的class 属性的值设置为空字符串即可
                reset()
                // 将当前悬浮的li标签的文字颜色和下边框变为红色
                this.className = 'active'
                console.log(this.innerHTML);
                var txt = this.innerHTML
                if (txt == '精选') {
                    content.innerHTML = '精选'
                } else if (txt == '美食') {
                    content.innerHTML = '美食城'
                } else if (txt == '游戏') {
                    content.innerHTML = '游戏'
                } else if (txt == '家居') {
                    content.innerHTML = '家居'
                } else if (txt == '宇宙飞船') {
                    content.innerHTML = '宇宙飞船'
                }
            }
        }
        function reset() {
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = ''
            }
        }
    </script>
</body>

</html>

总结：

1.onmouseover事件：鼠标移动到对象上面，触发onmouseover事件，执行事件下的函数代码。

代码格式：

this.onmouseover = function(){
	函数体
}

2.onmouseout 事件：鼠标离开对象，触发onmouseout事件，执行事件下的函数代码。

代码格式：

this.onmouseout = function(){
	函数体
}

一个想做架构师的前端开发学生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
onmouseover和onmouseout事件

onmouseover和onmouseout事件：案例1：表格的隔行换色style代码：<style> *{ margin: 0; padding: 0; } table{ width: 80%; line-height: 50px; text-align: center; border: 1px solid #eee; margin: 50px auto; border-collapse: collapse; }
复制链接

扫一扫

专栏目录