介绍 & lt; !DOCTYPE html>
& lt; html lang=皕h-CN"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;
& lt; title>鼠标经过表格变色& lt;/title>
& lt; style>
表{
保证金:200 px的汽车;
字体大小:12 px;
border-collapse:崩溃;
宽度:500 px;
高度:50 px;
｝
表thead tr {
字体大小:14 px;
背景颜色:天蓝色;
｝
td {
边界:1 px固体黑色;
｝
.bgc {
背景颜色:黄色;
｝
& lt;/style>
& lt;/head>
& lt; body>
& lt; table>
& lt; thead>
& lt; td>表头1 & lt;/td>
& lt; td>表头2 & lt;/td>
& lt; td>表头3 & lt;/td>
& lt;/thead>
& lt; tbody>
& lt; tr>
& lt; td>表格一行一列& lt;/td>
& lt; td>表格一行二列& lt;/td>
& lt; td>表格一行三列& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td>表格二行一列& lt;/td>
& lt; td>表格二行二列& lt;/td>
& lt; td>表格二行三列& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td>表格三行一列& lt;/td>
& lt; td>表格三行二列& lt;/td>
& lt; td>表格三行三列& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td>表格四行一列& lt;/td>
& lt; td>表格四行二列& lt;/td>
& lt; td>表格四行三列& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td>表格五行一列& lt;/td>
& lt; td>表格五行二列& lt;/td>
& lt; td>表格五行三列& lt;/td>
& lt;/tr>
& lt;/tbody>
& lt;/table>
& lt; script>
var tr=document.querySelectorAll (& # 39; tr # 39;);
我(var=0; & lt;tr.length;我+ +){
tr[我]。onmouseover=function () {
这一点。className=& # 39; bgc # 39;;
｝
tr[我]。onmouseout=function () {
这一点。className=& # 39; & # 39;;
｝
｝
& lt;/script>
& lt;/body>
& lt;/html>
今天就跟大家聊聊有关利用原生JS实现一个鼠标悬停变色效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
表格表头为蓝色,表主体为白色,当鼠标放到表的非表头行时,这一行颜色变为黄色,鼠标离开时黄色消失。
看完上述内容,你们对利用原生JS实现一个鼠标悬停变色效果有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。
