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属性++ ++来改变鼠标样式,使其在被点击时显示小手样式++

结果展示

相关推荐
布列瑟农的星空22 分钟前
rsbuild mock 插件开发指南
前端
用泥种荷花37 分钟前
【LangChain.js学习】 文档加载(Loader)与文本分割全解析
前端
cxxcode1 小时前
Vite 热更新(HMR)原理详解
前端
HelloReader1 小时前
Tauri 架构从“WebView + Rust”到完整工具链与生态
前端
Bigger2 小时前
告别版本焦虑:如何为 Hugo 项目定制专属构建环境
前端·架构·go
代码匠心3 小时前
AI 自动编程:一句话设计高颜值博客
前端·ai·ai编程·claude
_AaronWong5 小时前
Electron 实现仿豆包划词取词功能:从 AI 生成到落地踩坑记
前端·javascript·vue.js
cxxcode5 小时前
I/O 多路复用:从浏览器到 Linux 内核
前端
用户5433081441945 小时前
AI 时代,前端逆向的门槛已经低到离谱 — 以 Upwork 为例
前端
JarvanMo5 小时前
Flutter 版本的 material_ui 已经上架 pub.dev 啦!快来抢先体验吧。
前端