CSS修改悬浮上的文案

最新推荐文章于 2024-10-06 15:38:21 发布

智慧小仙女

最新推荐文章于 2024-10-06 15:38:21 发布

阅读量273

点赞数 1

文章标签： css javascript vue.js

本文链接：https://blog.csdn.net/weixin_42987138/article/details/142391739

版权

需求：

按钮默认显示“关注候选人”，点击按钮后文案变成“已关注”，悬浮时显示“取消关注”文案

设计图：

html实现代码：

<el-button
  class="block resumenBtn"
  :class="detailData.concernFlag ? 'cancelConcern' : '' "  
   @click="concernFunc"
>
  <span class="button-label">
    {{detailData.concernFlag ? "已关注" : "关注候选人" }}</span>
</el-button>

css实现代码：

.cancelConcern{
  background: #FFF7E3 !important;
  color: #FFB803 !important;
  &:hover{
          background: #E2E3E9 !important;
          opacity: 0.6 !important;
          color: #172838 !important;
  }
  &:hover::after {  
          content: "取消关注"; 
   } 
}
.cancelConcern:hover .button-label {  
   display: none;
}