第一：js进行鼠标悬停事件来处理DOM实际上是不合理的。对于界面交互上能通过css处理的事件就不要用js来处理；
第二：恰好css对于鼠标悬停是有对应的选择器及其处理；
处理方法：如图A：
假设A的id为a，css代码如下：
#a{width:100px
height:36px
float:left
}
//对于位置的固定可以自行选择处理,当前用float固定。
#a:hover{
width:200px
}
结果将会如你图中所需要的完成。
如必须用JS处理的话，代码如下：
//既定a的样式已明确：//html代码:
<span id='a' onmouseover="fc1(this)"
onmouseout="fc2(this)"></span>
<script>
function fc1(node){
node.style.width = '200px'
}
function fc2(node){
node.style.width = '100px'
}
</script>
举个粟子，写一个段落“鼠标悬停时把字体颜色变成红色，背景颜色变成灰色，离开时恢复”：
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>会变色的段落</title>
<script>
function chfgcolor(){
var e=document.getElementById("demo")
e.style.color="red"
}
function chbgcolor(){
var e=document.getElementById("demo")
e.style["background-color"]="grey"
}
function chback(){
var e=document.getElementById("demo")
e.style="color:#000000background-color:#ffffff"
}
</script>
</head>
<body>
<p id="demo" onmouseover="chfgcolor()chbgcolor()" onmouseout="chback()">这是一会变色的段落</p>
</body>
</html>
以下是运行效果截图：
代码截图
悬停前和离开后
动图
代码说明：这里面确实一次为这个段落创建了两个事件，都是DOM通用的事件，一个叫mouseover(鼠标悬停)，一个叫mouseout（鼠标离开），mouseover事件触发时要用到2个函数（function）, 分别是chfgcolor和chbgcolor, 而mouseout只用到1个chback函数。
还有，事件触发时会运行一些东西，但是不一定是函数。
1.利用elementUI组件里的Tooltip 文字提示实现原始页面：
实现效果：当鼠标悬浮在上左按钮时，出现提示信息
实现代码：
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
<el-button>上左</el-button>
</el-tooltip>
参数说明：
参数 说明 类型 可选值 默认值
effect 默认提供的主题 String dark/light dark
content 显示的内容，也可以通过 slot#content 传入 DOM String — —
placement Tooltip 的出现位置 String top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end bottom
更多具体内容请参考：Element - The world's most popular Vue UI framework
2.利用display实现提示内容
原始页面：
实现效果：鼠标悬浮时的效果
实现方法：
template中：
按钮为brother1，悬浮内容为brother2
<div class="father">
<div class="brother1"></div>
<div class="brother2">
进行分析
</div>
</div>
登录后复制
style中：
.brother1:hover+div{
display: block
}
.brother2{
display: none
}
登录后复制
该方法要实现鼠标悬浮效果必须两个类为兄弟节点！！！
3.利用@mouseover和@mouseleave实现提示信息
原始页面：
实现页面：除提示信息外，点击按钮会出现相应的窗口
悬浮效果：
点击效果：
实现方法：
template中：
<div
v-for="(item, index) in leftMenu"
:key="index"
@mouseover="hover = item.id"
@mouseleave="hover = -1"
:class="{ 'icon-item': true, 'icon-active': curIndex == item.id }"
@click="clickBtn(item.id)"
>
<div class="btn-msg" v-if="hover == item.id">{{ item.name }}</div>
</div>
登录后复制
data中：
showOne: true,
showTwo: false,
showThree: false,
登录后复制
leftMenu: [
{ name: '图层管理', id: 0 },
{ name: '实时监控', id: 1 },
{ name: '实时气象', id: 2 }
],
hover: -1,
curIndex: 0
登录后复制
methods中：
// 点击事件
clickBtn(index) {
this.reset()
this.curIndex == index ? (this.curIndex = -1) : (this.curIndex = index)
switch (this.curIndex) {
case 0: {
this.methodOne()
break
}
case 1: {
this.methodTwo()
break
}
case 2: {
this.methodThree()
break
}
default: {
break
}
}
},
登录后复制
reset() {
this.showOne = false
this.showTwo = false
this.showThree = false
},
登录后复制
methodOne() {
this.showOne = !this.sshowOne
},
methodTwo() {
this.showTwo = !this.showTwo
},
methodThree() {
this.showThree = !this.showThree
},
登录后复制
style中：
// 提示信息的样式
.btn-msg {
}
登录后复制
// 按钮的样式
.icon-item {
width: 34px
height: 200px
cursor: pointer
margin-bottom: -15px
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）