首页猿问 hover事件属于类吗？

hover事件属于类吗？

JavaScript

刺槐少女 2018-03-20 15:20:15

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> body{color:#fff;font:12px/1.5 Tahoma;} #div1{width:150px;height:150px;margin:0 auto;padding:10px;background:black;border:10px solid #000;cursor:crosshair;} #div1.hover{color:red;background:#f0f0f0;border:10px solid red;} </style> <script> window.onload = function () { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function () { oDiv.className = "hover" }; oDiv.onmouseout = function () { oDiv.className = "" } }; </script> </head> <body> <div id="div1">鼠标移入改变样式，鼠标移出恢复。</div> </body> </html> 如上述代码，为什么是oDiv.className = "hover" 可以控制的div的样式，在div中并没有定义过class，还是说hover本身就是个class类？还请前辈解惑

查看完整描述

4 回答

qq_玩二小_0

TA贡献2条经验获得超1个赞

不属于

1 反对回复 2018-03-21

慕莱坞8333017

TA贡献50条经验获得超0个赞

21074

反对回复 2021-11-18

icecap

TA贡献3条经验获得超2个赞

此hover非css里的伪类hover ，这个只是事先定义了一个类名叫hover的样式，鼠标进入时加上类名，离开清空类名。你可能困惑在初始化时div上并没有class，其实是js原生api，在调用className方法时没有class会自动加上class~

反对回复 2018-03-20

刺槐少女
没有class会自动加上class，但是我不太懂的是hover不是个class为什么加上会有效果？

回复 2018-03-21
刺槐少女
哦，了解了，不过我改写过，这段源代码中给了div一个id，我改写后试过不给div一个id，然后div：hover设置样式，js中获取相应的tag。运行后一样能成功，我就很奇怪了，为什么hover怎么变成class了

回复 2018-03-21

qq_杀意隆_0

TA贡献93条经验获得超29个赞

在html的确没有定义过class , 这个hover类是通过JavaScript事件给div加上去的。
当鼠标移入时，动态给div添加hover类。鼠标移开时，又把hover类从div去掉。

反对回复 2018-03-20

刺槐少女
所以说，hover本身就是个类？可是在css中对它的设置却是div:hover，不是#hover啊？还麻烦解答

回复 2018-03-20
刺槐少女
我知道上面的代码是div.hover 但是我改写后一样能运行，去掉div的ID，CSS样式中用div:hover设置样式，JS中用tag获取div，然后还是可以运行，也就是说，我疑惑的是，是伪类的时候，为什么还是可以把hover变成class？

回复 2018-03-22
qq_杀意隆_0
SS样式中用div:hover设置样式时，没有写js都可以改变样式！伪类hover的动画功能本身就是css自身具备的，当然可以运行

回复 2018-03-22

点击展开后面1条

CodeManDSH

TA贡献58条经验获得超18个赞

试试这个：

oDiv.classList.add("hover");

反对回复 2018-03-20

刺槐少女
向class列表中添加hover？

回复 2018-03-20
CodeManDSH
向你的oDiv 的class属性中添加hover，这样子，oDiv就有“hover”这个类名了。但是如果你说的是伪类hover，那就是css的：#div1:hover{}，是样式，不是class

回复 2018-03-21

4 回答
0 关注
2462 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

hover事件属于类吗？

hover事件属于类吗？

4 回答

添加回答