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

结果展示

相关推荐
VcB之殇31 分钟前
popstate监听浏览器的前进后退事件
前端·javascript·vue.js
宁雨桥40 分钟前
Vue组件初始化时序与异步资源加载的竞态问题实战解析
前端·javascript·vue.js
JIngJaneIL1 小时前
基于java+ vue家庭理财管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
GISer_Jing1 小时前
Taro跨端开发实战:JX首页实现_Trae SOLO构建
前端·javascript·aigc·taro
vipbic1 小时前
基于 Nuxt 4 + Strapi 5 构建高性能 AI 导航站
前端·后端
不要em0啦2 小时前
从0开始学python:简单的练习题3
开发语言·前端·python
老华带你飞2 小时前
电商系统|基于java + vue电商系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
大猫会长2 小时前
关于http状态码4xx与5xx的背锅问题
前端
喝拿铁写前端2 小时前
AI 驱动前端开发覆盖的能力全景拆解
前端·javascript·人工智能
1024小神2 小时前
确认了,Cloudflare的R2对象存储S3接口api不支持在web端使用
前端