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

结果展示

相关推荐
石小石Orz3 分钟前
浏览器的预检请求OPTIONS到底有什么用?
前端
落雪小轩韩7 分钟前
网格布局 CSS Grid
前端·css
parade岁月10 分钟前
Vue 3 父子组件模板引用的时序陷阱与解决方案
前端
xianxin_14 分钟前
CSS Outline(轮廓)
前端
moyu8415 分钟前
遮罩层设计与实现指南
前端
Pedantic24 分钟前
用 SwiftUI 打造一个 iOS「设置」界面
前端
timeweaver30 分钟前
深度解析 Nginx 前端 location 配置与优先级:你真的用对了吗?
前端·nginx·前端工程化
鲸落落丶31 分钟前
网络通信---Axios
前端
wwy_frontend32 分钟前
React性能优化实战:从卡顿到丝滑的8个技巧
前端·react.js
小高0071 小时前
面试官:npm run build 到底干了什么?从 package.json 到 dist 的 7 步拆解
前端·javascript·vue.js