| 鼠标悬浮效果：css:hover；js:mouseover,mouseout | 您所在的位置：网站首页 › 悬浮效果怎么画 › 鼠标悬浮效果：css:hover；js:mouseover,mouseout |
|
目录 一、css样式实现 二、js实现 一、css样式实现1.xxx:hover 只能生成css可以控制的样式效果 div:hover{ color:red; } 二、js实现1.moseover(鼠标悬浮) 1）能修改样式，同时修改DOM中的内容 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) }) }2）优化：事件委派，减少点击事件的注册，减少内存占用 用e.target中的 className 或 tagName 或 id 判断是否时需要更改样式、内容的元素 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) } })3）完整代码 边框变化不影响布局 .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; } 1 2 3 4 5 6 7 8 // 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) } })2.mouseout(鼠标移除调用的事件) 同mouseover,不再赘述！ /* 希望对你有帮助！ 如有错误，欢迎指正！ 非常感谢! */ |
| CopyRight 2018-2019 实验室设备网 版权所有 |