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

结果展示

相关推荐
辛-夷1 分钟前
VUE面试题(单页应用及其首屏加载速度慢的问题)
前端·javascript·vue.js
田哥coder2 分钟前
充电桩项目:前端实现
前端
青年有志15 分钟前
Web 服务器介绍 | 通过 Tomcat 说明其作用
服务器·前端·tomcat
dawn19122835 分钟前
SpringMVC 中的域对象共享数据
java·前端·servlet
newxtc1 小时前
【爱给网-注册安全分析报告-无验证方式导致安全隐患】
前端·chrome·windows·安全·媒体
hello_fracong1 小时前
3.Vue2结合element-ui实现国际化多语言i18n
vue
dream_ready2 小时前
linux安装nginx+前端部署vue项目(实际测试react项目也可以)
前端·javascript·vue.js·nginx·react·html5
编写美好前程2 小时前
ruoyi-vue若依前端是如何防止接口重复请求
前端·javascript·vue.js
flytam2 小时前
ES5 在 Web 上的现状
前端·javascript
喵喵酱仔__2 小时前
阻止冒泡事件
前端·javascript·vue.js