效果:

HTML:

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

CSS:

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

js-点击+加关注变成已关注,已关注状态时,鼠标滑动上的状态时取消关注的更多相关文章

  1. js点击加载更多可以增加几条数据的显示

      <div class="list"> <div class="one"> <div class="img" ...

  2. JS实现点击加载更多效果

    适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊)   点击加载更多效果:         第一个和第二个参数分别是btn和ul的DOM(必填)     ...

  3. 关于关注和取消关注的nodejs写法

    本例子的关注和取消关注,是通过ajax的方法实现的:nodejs后台写好api接口:响应前台的ajax 先看ajax的代码实现: // 用户关注标签 function subscribe(uid, t ...

  4. 转:JS线程和JS阻塞页面加载的问题

    前几日写了一篇文章,介绍了js阻塞页面加载的问题.当时是通过例子来验证的.今天,我介绍一下浏览器内核,从原理上介绍一下js阻塞页面加载的原因. 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同 ...

  5. js实现动态加载脚本的方法实例汇总

      本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...

  6. 性能优化之html、css、js三者的加载顺序

    前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...

  7. Yii 1开发日记 -- Ajax实现点击加载下一页

    功能实现:先输出一页的内容,然后点击加载下一页,如图 1.控制器中 /** * 消费记录:列出用户购买章节的记录 */ public function actionMyPayHis() { //点击加 ...

  8. js实现『加载更多』功能实例

    DEMO : 滚动加载示例 关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...

  9. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

随机推荐

  1. 【OpenGL】初识OpenGL4.0

    目录(?)[-] 什么是GLSL GLEW 安装GLEW 使用GLEW 其他库 使用GLM库进行数学运算 安装GLM 使用GLM 使用GLM作为OpenGL的输入 使用GLFW进行窗口管理 这篇文章主 ...

  2. 【DSP开发】【Linux开发】Linux下PCI设备驱动程序开发

    PCI是一种广泛采用的总线标准,它提供了许多优于其它总线标准(如EISA)的新特性,目前已经成为计算机系统中应用最为广泛,并且最为通用的总线标准.Linux的内核能较好地支持PCI总线,本文以Inte ...

  3. (已解决)Could not open '/var/lib/nova/mnt/*/volume-*': Permission denied

    [问题描述] 创建boot_from_volume的虚机时,磁盘后端为NFS,创建失败. [错误日志] nova-compute模块 Could not open '/var/lib/nova/mnt ...

  4. (5.4)mysql高可用系列——MySQL异步复制(实践)

    关键词:mysql复制,mysql异步复制,mysql传统异步复制 [1]实验环境 操作系统:CentOS linux 7.5 数据库版本:5.7.24 数据库架构:主从复制,主库用于生产,从库用于数 ...

  5. 非旋(fhq)Treap小记

    前置知识:二叉搜索树 以下摘自 ↑: 二叉搜索树每次操作访问O(深度)个节点. 在刻意构造的数据中,树的形态会被卡成一条链,于是复杂度爆炸 它的复杂度与直接暴力删除类似. 但二叉搜索树扩展性强.更复杂 ...

  6. unittest之一框架、suite

    1.unittest是Python的标准库里的模块,所以在创建测试方法时,需直接导入unittest即可 2.unittest框架的六大模块: 测试用例TestCase 测试套件TestSuit:测试 ...

  7. Map<k,v>接口

    https://docs.oracle.com/javase/8/docs/api/java/util/Map.html public interface Map<K,V> K—key,V ...

  8. 搭建springCloud网关zuul

    一.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  9. Java排序--排序算法(内排序)

    常用内排序算法 我们通常所说的排序算法往往指的是内部排序算法,即需要排序的数据在计算机内存中完成整个排序的过程,当数据率超大或排序较为繁琐时常借助于计算机的硬盘对大数据进行排序工作,称之为外部排序算法 ...

  10. O023、理解Nova架构

    参考https://www.cnblogs.com/CloudMan6/p/5410447.html   Compute Service Nova 是OpenStack最核心的服务,负责维护和管理云环 ...