elementui hover
elementui hover 用法
Element UI 提供了一些组件支持 hover 交互效果，常见的有按钮、菜单、表格行等。以下是几种典型的使用场景：
按钮 hover 效果
按钮默认自带 hover 样式变化，无需额外配置。可通过 type 属性设置不同颜色主题：
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>表格行 hover 高亮
通过 highlight-current-row 属性启用行高亮效果：
<el-table :data="tableData" highlight-current-row>
<el-table-column prop="date" label="日期"></el-table-column>
</el-table>下拉菜单 hover 交互
菜单项默认支持 hover 效果，配合 @mouseenter 事件可实现更复杂交互：
<el-dropdown>
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @mouseenter="handleHover">选项1</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>自定义 hover 样式
可通过 CSS 覆盖默认样式实现自定义效果：
修改按钮 hover 背景色
.el-button:hover {
background-color: #ff9900;
}表格行 hover 样式调整
.el-table__body tr:hover>td {
background-color: #f5f7fa;
}禁用默认 hover 效果
某些组件可通过 disabled 属性禁用交互：
<el-button disabled>不可点击按钮</el-button>高级 hover 控制
结合 Vue 的指令实现动态效果：
v-show 控制元素显隐
<div @mouseenter="showTip=true" @mouseleave="showTip=false">
<span v-show="showTip">提示文字</span>
</div>transition 添加动画
<transition name="fade">
<div v-if="isHover">悬浮显示内容</div>
</transition>.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}常见问题解决
hover 延迟问题
添加 v-debounce 指令或使用 CSS 过渡：
.el-menu-item {
transition: all 0.3s;
}移动端兼容性 通过媒体查询禁用 hover 效果：
@media (max-width: 768px) {
.el-button:hover {
background-color: initial;
}
}自定义组件 hover
对于非 Element 组件，可用 @mouseenter.native 监听原生事件：
<custom-comp @mouseenter.native="handleHover"></custom-comp>
