zoukankan      html  css  js  c++  java
  • js-点击+加关注变成已关注,已关注状态时,鼠标滑动上的状态时取消关注

    效果:

    HTML:

     <div class="rightBtn cur">+关注</div>

    CSS:

    .rightBtn{
    80px;
    height: 30px;
    background: rgba(200, 200, 200, 1);/*灰色*/
    color: #fff;
    text-align: center;
    line-height: 30px;
    border-radius: 2px;
    cursor: pointer;
    }
    .cur {
    background: #FB452F;
    }
    .rightBtn:hover {
    background: #FF5844;
    }
    .cur:hover {
    background: #FF5844;
    }

    JS:

    $(".rightBtn").click(function(){
    let flag=$(this).hasClass("hh");
    if(flag){
    $(this).text("+关注")
    $(this).addClass("cur")
    $(this).removeClass("hh")
    }else{
    // $(this).addClass()
    $(this).text("已关注")
    $(this).addClass("hh")
    $(this).removeClass("cur")
    }
    })
    $(".rightBtn").mouseover(function(){
    let flag=$(this).hasClass("hh");
    console.log(flag,888)
    if(flag){
    $(this).text("取消关注")
    }else{
    $(this).text("+关注")
    }

    })
    $(".rightBtn").mouseout(function(){
    let flag=$(this).hasClass("hh");
    if(flag){
    $(this).text("已关注")
    }
    })

    JS:代码截图,便于看代码

  • 相关阅读:
    005 HTML+CSS(Class027
    004 HTML+CSS(Class024
    003 HTML+CSS(Class011
    002HTML+CSS(class007-010)
    001HTML+CSS(class001-006)
    021 vue路由vue-router
    020 Vue 脚手架CLI的使用
    019 Vue webpack的使用
    018 vue的watch属性
    017 vue的插槽的使用
  • 原文地址:https://www.cnblogs.com/snowbxb/p/11888807.html
Copyright © 2011-2022 走看看