首頁(yè) 猿問(wèn) 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">鼠標(biāo)移入改變樣式，鼠標(biāo)移出恢復(fù)。</div> ? ?</body> ? ?</html> ? ?如上述代碼，為什么是oDiv.className = "hover" 可以控制的div的樣式，在div中并沒(méi)有定義過(guò)class，還是說(shuō)hover本身就是個(gè)class類？還請(qǐng)前輩解惑

查看完整描述

4 回答

qq_玩二小_0

TA貢獻(xiàn)2條經(jīng)驗(yàn) 獲得超1個(gè)贊

不屬于

1 反對(duì) 回復(fù) 2018-03-21

慕萊塢8333017

TA貢獻(xiàn)50條經(jīng)驗(yàn) 獲得超0個(gè)贊

21074

反對(duì) 回復(fù) 2021-11-18

icecap

TA貢獻(xiàn)3條經(jīng)驗(yàn) 獲得超2個(gè)贊

此hover非css里的偽類hover ，這個(gè)只是事先定義了一個(gè)類名叫hover的樣式，鼠標(biāo)進(jìn)入時(shí)加上類名，離開清空類名。你可能困惑在初始化時(shí)div上并沒(méi)有class，其實(shí)是js原生api，在調(diào)用className方法時(shí)沒(méi)有class會(huì)自動(dòng)加上class~

反對(duì) 回復(fù) 2018-03-20

刺槐少女
沒(méi)有class會(huì)自動(dòng)加上class，但是我不太懂的是hover不是個(gè)class為什么加上會(huì)有效果？

回復(fù) 2018-03-21
刺槐少女
哦，了解了，不過(guò)我改寫過(guò)，這段源代碼中給了div一個(gè)id，我改寫后試過(guò)不給div一個(gè)id，然后div：hover設(shè)置樣式，js中獲取相應(yīng)的tag。運(yùn)行后一樣能成功，我就很奇怪了，為什么hover怎么變成class了

回復(fù) 2018-03-21

qq_殺意隆_0

TA貢獻(xiàn)93條經(jīng)驗(yàn) 獲得超29個(gè)贊

在html的確沒(méi)有定義過(guò)class?,?這個(gè)hover類是通過(guò)JavaScript事件給div加上去的。
當(dāng)鼠標(biāo)移入時(shí)，動(dòng)態(tài)給div添加hover類。鼠標(biāo)移開時(shí)，又把hover類從div去掉。

反對(duì) 回復(fù) 2018-03-20

刺槐少女
所以說(shuō)，hover本身就是個(gè)類？可是在css中對(duì)它的設(shè)置卻是div:hover，不是#hover??？還麻煩解答

回復(fù) 2018-03-20
刺槐少女
我知道上面的代碼是div.hover 但是我改寫后一樣能運(yùn)行，去掉div的ID，CSS樣式中用div:hover設(shè)置樣式，JS中用tag獲取div，然后還是可以運(yùn)行，也就是說(shuō)，我疑惑的是，是偽類的時(shí)候，為什么還是可以把hover變成class？

回復(fù) 2018-03-22
qq_殺意隆_0
SS樣式中用div:hover設(shè)置樣式時(shí)，沒(méi)有寫js都可以改變樣式！偽類hover的動(dòng)畫功能本身就是css自身具備的，當(dāng)然可以運(yùn)行

回復(fù) 2018-03-22

點(diǎn)擊展開后面1條

CodeManDSH

TA貢獻(xiàn)58條經(jīng)驗(yàn) 獲得超18個(gè)贊

試試這個(gè)：

oDiv.classList.add("hover");

反對(duì) 回復(fù) 2018-03-20

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

回復(fù) 2018-03-20
CodeManDSH
向你的oDiv 的class屬性中添加hover，這樣子，oDiv就有“hover”這個(gè)類名了。但是如果你說(shuō)的是偽類hover，那就是css的：#div1:hover{}，是樣式，不是class

回復(fù) 2018-03-21