刺槐少女
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 回答
icecap
TA貢獻3條經驗 獲得超2個贊
此hover非css里的偽類hover ,這個只是事先定義了一個類名叫hover的樣式,鼠標進入時加上類名,離開清空類名。你可能困惑在初始化時div上并沒有class,其實是js原生api,在調用className方法時沒有class會自動加上class~
qq_殺意隆_0
TA貢獻93條經驗 獲得超29個贊
在html的確沒有定義過class?,?這個hover類是通過JavaScript事件給div加上去的。 當鼠標移入時,動態給div添加hover類。鼠標移開時,又把hover類從div去掉。
點擊展開后面1條
添加回答
舉報
0/150
提交
取消
