目录
示例:下拉菜单,当鼠标经过菜单时显示其下拉菜单,同时隐藏其他下拉菜单
一、DOM
1.排他思想
排除掉其他元素(包括自己),然后再给自己设置想要的效果
第一步:清除所有元素原有的样式
第二步:给自己(当前元素)设置想要的效果
示例1:鼠标点击时改变按钮的背景色
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//1.获取所有的按钮
let btns = document.querySelectorAll('button')
//2.给每个按钮绑定click事件
for(let i=0;i<btns.length;i++){
btns[i].onclick = function(){
//2.1 排他第一步:清除所有按钮的背景色
for(let j=0;j<btns.length;j++){
btns[j].style.backgroundColor = ''
}
//2.2 排他第二步:设置当前元素的样式效果
this.style.backgroundColor = 'pink'
}
}
</script>
</body>
示例2:鼠标经过时改变表格行的背景色
(1)鼠标经过事件:mouseover
(2)鼠标离开事件:
<style>
.bg{
background-color: pink;
}
</style>
<body>
<table border="1">
<thead>
<tr>
<th width="100">学号</th>
<th width="100">姓名</th>
<th width="100">性别</th>
<th width="100">地址</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>1001</td>
<td>刘备</td>
<td>男</td>
<td>小沛</td>
</tr>
<tr align="center">
<td>1002</td>
<td>孙权</td>
<td>男</td>
<td>南京</td>
</tr>
<tr align="center">
<td>1003</td>
<td>曹操</td>
<td>男</td>
<td>许昌</td>
</tr>
<tr align="center">
<td>1004</td>
<td>司马懿</td>
<td>男</td>
<td>长安</td>
</tr>
<tr align="center">
<td>1005</td>
<td>赵云</td>
<td>男</td>
<td>常山</td>
</tr>
</tbody>
</table>
<script>
//1.获取tbody下的所有行
let trs = document.querySelector('tbody').querySelectorAll('tr');
//2.给trs中每行绑定鼠标事件:mouseove、mouseout
for(let i=0;i<trs.length;i++){
trs[i].onmouseover = function(){ //鼠标经过行时变色
this.className = 'bg'
}
trs[i].onmouseout = function(){ //鼠标离开行时去掉颜色
this.className = ''
}
}
</script>
</body>