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

jquery可以通过选择器选择一类的标签集合。然后通过$(this)指向当前对象。 $("#ul li")这个可以获取id为ul下的所有的li 当鼠标经过某个li是使用$(this)表示当前的li对象在进行 *** 作。 每个li都添加mouseover可以理解为

---