鼠标悬浮效果:css:hover;js:mouseover,mouseout |
您所在的位置:网站首页 › js鼠标悬浮提示文字 › 鼠标悬浮效果: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 办公设备维修网 版权所有 豫ICP备15022753号-3 |