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

原文地址:https://www.cnblogs.com/snowbxb/p/11888807.html