一、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相关推荐

[译] CSS 变量实现炫酷鼠标悬浮效果
原文: Stunning hover effects with CSS variables 我的博客:[译] CSS 变量实现炫酷鼠标悬浮效果我最近从Grover网站上的有趣的悬停动画中获得灵感.将 ...
鼠标悬浮事件 -jQuery hover（）方法（layer.js）（layer.tips）
鼠标悬浮事件 -jQuery hover()方法代码: <!DOCTYPE html> <html lang="en"> <head><m ...
React 入门：实战案例 TodoList Item鼠标悬浮效果
文章目录目标实现效果实现思路实现步骤第一步:Item 组件中定义一个 `mouse` 的 state 属性第二步:定义悬浮事件回调第三步:绑定事件处理,及悬浮样式控制完整代码 Item ...
html鼠标悬浮更换图片,Vue.js鼠标悬浮更换图片功能
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现. 首先将所有的选中后图片都覆盖到没选中图片上 c ...
鼠标悬浮事件 -jQuery hover（）方法
body内容 <div class="title-01"><span class="name">机构账户统计</span>& ...
鼠标悬浮事件的hover的使用
鼠标悬浮事件hover的使用用法1: 表示当鼠标悬浮在a元素上时,a元素的背景颜色变成粉色 .a:hover{background-color: pink;} 用法2: 用a来控制其他元素用a来控 ...
vue项目中鼠标悬浮图片实现hover效果切换图片-案例
1.使用css实现鼠标滑动切换图片效果 <ul class="ullist"><li class="img1"><img src= ...
html5页面中鼠标悬停效果,CSS实例：非常不错的鼠标悬停TIP效果！_div+css布局教程...
在实际开发中,我们会给图片加上alt.给链接加上title,为了出故障预备,也可以提醒用户的内容是什么,或仅仅是tip提示.今天我们介绍一款不错的鼠标悬停TIP效果,图片如下: 这样的效果在实际开发中 ...
【我的代码】前端遇上After Effects --- 鼠标悬浮效果（上）
通过AE+PS+CSS3动画实现炫酷的鼠标hover效果(上)--动画的制作和PNG序列的输出一.大体思路大概就是用AE做动画导出帧序列,PS排版成一个长条的图片,然后再在css样式中设置动画. ...

鼠标悬浮效果：css:hover；js:mouseover,mouseout

一、css样式实现

二、js实现

鼠标悬浮效果：css:hover；js:mouseover,mouseout相关推荐

最新文章

热门文章