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(){ 函数体 }