鼠标悬浮效果：css:hover；js:mouseover,mouseout
生活随笔
收集整理的這篇文章主要介紹了
鼠标悬浮效果：css:hover；js:mouseover,mouseout
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
一、css樣式實現
二、js實現
一、css樣式實現
1.xxx:hover
只能生成css可以控制的樣式效果
<style>div:hover{color:red;} </style>二、js實現
1.moseover(鼠標懸浮)
1）能修改樣式，同時修改DOM中的內容
<script>let sons = document.getElementsByClassName("son");let borderWidth = 4;for (let i = 0; i < sons.length; i++) {sons[i].addEventListener("mouseover", (e) => {console.log("mouseover:", e, e.target.style)e.target.style.borderWidth = borderWidth + i + "px";e.target.innerHTML="mouseover"+i+1;})sons[i].addEventListener("mouseout", (e) => {console.log("mouseout:", e, e.target.style)e.target.style.borderWidth = "none";e.target.innerHTML = (i + 1)})}</script>2）優化：事件委派，減少點擊事件的注冊，減少內存占用
?用e.target中的 className 或 tagName 或?id 判斷是否時需要更改樣式、內容的元素
<script>let parent = document.getElementsByClassName("container");let borderWidth = 8;// 事件委托：只在父元素上注冊事件,減少內存占用parent[0].addEventListener("mouseover", (e) => {console.log("e", e, e.target)if (e.target.className == "son") {e.target.style.boxSizing = "border-box"console.log("son:", e.target.className)e.target.style.borderWidth = borderWidth + "px";e.target.style.padding = 20 + "px";e.target.innerHTML = "mouseover" + (borderWidth)}}) </script>3）完整代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>邊框變化不影響布局</title><style>.container {display: flex;flex-wrap: wrap;}.son {height: 400px;width: 300px;background-color: skyblue;margin: 5px;/* border: 3px solid transparent; *//* box-sizing: border-box; */}.son:hover {border: 6px solid #894;}</style> </head> <body><div class="container"><div class="son">1</div><div class="son">2</div><div class="son">3</div><div class="son">4</div><div class="son">5</div><div class="son">6</div><div class="son">7</div><div class="son">8</div></div> </body> <script>// let sons = document.getElementsByClassName("son");// let borderWidth = 4;// // object// console.log("sonsType:", typeof (sons))// for (let i = 0; i < sons.length; i++) {// sons[i].addEventListener("mouseover", (e) => {// e.target.style.boxSizing = "border-box"// console.log("mouseover:", e, e.target.style)// e.target.style.borderWidth = borderWidth + i + "px";// e.target.innerHTML = "mouseover" + (i + 1)// })// sons[i].addEventListener("mouseout", (e) => {// console.log("mouseout:", e, e.target.style)// e.target.style.borderWidth = "none";// e.target.innerHTML = (i + 1)// })// }let parent = document.getElementsByClassName("container");let borderWidth = 8;// 事件委托：只在父元素上注冊事件,減少內存占用parent[0].addEventListener("mouseover", (e) => {console.log("e", e, e.target)if (e.target.className == "son") {//加邊框不會影響布局e.target.style.boxSizing = "border-box"console.log("son:", e.target.className)e.target.style.borderWidth = borderWidth + "px";e.target.style.padding = 20 + "px";e.target.innerHTML = "mouseover" + (borderWidth)}}) </script></html>2.mouseout(鼠標移除調用的事件)
? 同mouseover,不再贅述！
/*
希望對你有幫助！
如有錯誤，歡迎指正！
非常感謝!
*/
總結
以上是生活随笔為你收集整理的鼠标悬浮效果：css:hover；js:mouseover,mouseout的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 苹果6手机怎么录屏_OPPO手机怎么录屏
- 下一篇： jmeter 性能测试场景