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

结果展示

相关推荐
焰火199911 分钟前
[Vue]可重置的响应式状态reactive
前端·vue.js
陆枫Larry12 分钟前
CSS transform scale:图片放大效果背后的原理
前端
老王以为22 分钟前
为什么 React 和 Vue 不一样?
前端·vue.js·react.js
web打印社区24 分钟前
2026最新Web静默打印解决方案,无插件无预览,完美替代Lodop
前端·javascript·vue.js·electron·pdf
这个DBA有点耶39 分钟前
分组排名不用窗口函数?那你还在写几十行的子查询
前端·代码规范
ZhiqianXia42 分钟前
《The Design of Design》阅读笔记
前端·笔记·microsoft
有马贵将1 小时前
【5】微前端知识点总结
前端·架构
mkae1 小时前
eBPF高性能版fail2ban
前端
_柴富自由1 小时前
前端项目国际化解决方案
前端
isixe1 小时前
Uniapp 监听回到前台并全局唯一弹窗
前端