div组件作为按钮点击时显示小手样式

最近开发的时候发现用div来做按钮比直接使用el-button方便很多,调整样式也方便,但是如果直接使用div做按钮,鼠标放上面时只显示一个竖着的光标,很不美观,并且不会让用户知道可以点击

javascript 复制代码
<template>
  <div class="detail" @click="handleClick">详情</div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 处理点击事件的逻辑

    }
  }
}
</script>

<style>
.detail{
  cursor: pointer;
}
</style>

++可以通过为div元素添加++++cursor属性++ ++来改变鼠标样式,使其在被点击时显示小手样式++

结果展示

相关推荐
xiaoxue..几秒前
解析 LocalStorage与事件委托在前端数据持久化中的应用
前端·javascript·面试
Mintopia1 分钟前
「无界」全局浮窗组件设计与父子组件最佳实践
前端·前端框架·前端工程化
@cc小鱼仔仔14 分钟前
vue 知识点
前端·javascript·vue.js
特级业务专家17 分钟前
《终章:从 Vite 专用到全构建工具生态 - 我的字体插件如何征服 Webpack、Rollup 全栈》
前端·javascript·vue.js
|晴 天|20 分钟前
Monorepo 实战:使用 pnpm + Turborepo 管理大型项目
前端
ByteCraze21 分钟前
如何处理大模型幻觉问题?
前端·人工智能·深度学习·机器学习·node.js
fruge22 分钟前
技术面试复盘:高频算法题的前端实现思路(防抖、节流、深拷贝等)
前端·算法·面试
Mike_jia25 分钟前
LoggiFly:开源Docker日志监控神器,实时洞察容器健康的全栈方案
前端
风语者日志27 分钟前
CTFSHOW菜狗杯—WEB签到
前端·web安全·ctf·小白入门
276695829233 分钟前
最新 _rand 分析
前端·javascript·数据库·node·rand·231滑块·_rand分析