elementui hover

ElementUI Hover 效果实现方法

ElementUI 提供了多种组件支持 hover 交互效果，主要通过 CSS 伪类和组件内置事件实现。

按钮 hover 效果

<el-button type="primary" @mouseenter="handleHover">Hover 按钮</el-button>

按钮默认带有颜色深浅变化的 hover 效果，可通过 CSS 覆盖默认样式：

.el-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

表格行 hover 效果

<el-table :data="tableData" :row-class-name="tableRowClassName">
</el-table>

通过设置 highlight-current-row 属性启用行高亮：

methods: {
  tableRowClassName({row, rowIndex}) {
    return 'hover-row';
  }
}

CSS 样式：

.el-table .hover-row:hover>td {
  background-color: #f5f7fa;
}

菜单项 hover 效果

<el-menu>
  <el-menu-item index="1" @mouseenter="handleMenuHover">菜单项</el-menu-item>
</el-menu>

自定义菜单 hover 样式：

.el-menu-item:hover {
  background-color: #ecf5ff;
  color: #66b1ff;
}

弹窗 hover 效果

<el-popover placement="top" trigger="hover">
  <div slot="reference">hover 触发</div>
  <div>弹出内容</div>
</el-popover>

自定义全局 hover 样式

在全局 CSS 中定义通用 hover 类：

.hover-effect {
  transition: all 0.3s;
}
.hover-effect:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

组件中使用：

<el-card class="hover-effect">悬停卡片</el-card>

禁用 hover 效果

对特定组件添加 :hover="false" 属性或通过 CSS 覆盖：

.no-hover:hover {
  background-color: inherit !important;
}