el-card里的div怎么加鼠标悬停效果

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

通过css伪类中的“hover”来实现。

1、新建html文件，在body标签中添加一个div标签，div标签里面嵌套一个p标签，然后添加p标签内容，这里以“演示文本”为例：

2、在head标签中添加style标签，然后在style标签中给p标签设置预先显示样式，预先是先不显示的，所以给p标签设置的属性代码是“p{display:none}”；再给div设置宽和高，这里为了演示方便，为div设置一个灰色的背景色，代码为“div{width:100pxheight:100pxbackground:#ccc}”：

3、给div标签添加hover伪类，然后打出一个空格，再设置此时p标签的显示样式。代码为“div:hoverp{display:block}”，这段代码的意思是，当鼠标放在div上时，将p标签的显示状态从隐藏改成显示，此时p标签中的文字就会显示出来：

---