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:代码截图,便于看代码

  • 相关阅读:
    shell编程
    git
    Flask-SQLAlchemy
    pipreqs
    命令行操作flask
    SQLAlchemy中scoped_session实现线程安全
    打印信息
    键盘事件
    安卓手机APP压力monkey测试
    手机APP功能测试经验分享2016.06.06
  • 原文地址:https://www.cnblogs.com/snowbxb/p/11888807.html
Copyright © 2011-2022 走看看