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

antdesignpro踩坑

1、想在Card组件上添加点击事件，直接加在Card上不起作用，然后百度了很长时间都没找到，最后又看了芦银官方文档，发现官方也没有给示例，最后自己尝试了好多终于成功

如图可以借用actions方法  通启谨过a标签 来触发点击事陪旁宴件

很抱歉，我没有看到您提到的图形。但是，根据您提到的是使用 Element UI 来实现效果，我可以给出一些使用 Element UI 实现复杂布局的一般步骤：

在您的项目中集成 Element UI 组件库。

使用 Element UI 提供的布局组件如 el-row 和 el-col，通过嵌套和使用各种属性和样式来完成目标布局。

根据您要展示的具体内容，将内容放置在适当的 el-row 和 el-col 组件中。可以在需要的地方添加其他的 Element UI 组件来实现更复杂的布局效果。

根据需要，使用 Element UI 库的样式设置来自定义布局组件的大小、颜色等数悉外观属性。

在需要时添加事件处理程序，以响应用户交互和动态元素的变化。

可以通过参薯塌乎考 Element UI 官方文档和示例代码来了解如何使用 Element UI 实现各种复杂布局。这里提供一个基本的示例代码：

<template>

 <el-row>

   <el-col :span="16">

     <!-- 放置列表内容 -->

   </el-col>

   <el-col :span="8">

     <el-card>

       <!-- 放置右侧面板内容 -->

     </el-card>

   </el-col>

 </el-row>

</template>

此处使用 el-row 和 el-col 组件来创建一个两列布局，其中左侧 el-col 组件的宽度为 16 格，右侧 el-col 组件的宽度为 8 格。在左侧部分可以放置列表内容，右侧部分可以放置一个带标题栏的卡片衫袜组件，以展示相关信息。根据实际需求，可以在此基础上进行适当调整。

---