css实现点击div改变背景图片，再点击更换成之前点击的样子

已于 2022-06-27 16:28:35 修改
阅读量2.5k 收藏 8
点赞数 1
于 2022-06-24 17:30:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anony_me/article/details/125449272
版权

CSS 点击事件 背景图片切换 样式变换 class切换
关键词由CSDN通过智能技术生成

css实现点击div改变背景图片，再点击更换成之前点击的样子
1.定义一个点击事件，同时class绑定两个属性，showBtn为true是展示showBox的class属性
在这里插入图片描述
2.开始默认showBtn为true，
在这里插入图片描述
3.展示开始默认的效果图：
在这里插入图片描述
4.点击slideBox，如果showBtn为true变为showBtn为false，如果showBtn为false变为showBtn为true
在这里插入图片描述
5.这里是style里面定义好的属性，你想展示点击后是什么样子，可以在hideBox添加相应属性。
在这里插入图片描述
6.点击完成之后，我的页面效果是位置发生变化，图片转换180度，下方是展示的效果图。如果再点击这个按钮就变成上方图的效果了
在这里插入图片描述

小何同学要加油
关注
纯CSS实现背景图片切换(CSS3伪类实现背景图片切换)
心有猛狗
09-30 2万+
跟着慕课网的教程学习了一下伪类 ，然后试着练习了一下用CSS伪类来实现背景图片切换。 先上一下效果图，当我点击圆圈里的缩略图的时候，背景图片就会变为与缩略图一样的图片。 要用到的伪类及其作用有： 1、nth-of-type()给每个文字块设置不同颜色。 2、::after 添加圆形缩略图的div 3、nth-of-type()配合::after添加缩略图 4、 ::befor 给圆形缩
jq换背景图片
weixin_57726829的博客
05-18 2496
功能实现 图片1 上述所讲：表面布局由一个长方形形成的，将三个小盒子包在在一起，起初宽度大小可以调整自已喜欢宽度，里面颜色也是可以做成各式各样的图片放进去，对于自检要一下 自已做幅度有没有到达客观性以及整体性，视觉增加美好效果。 图片2： 主要接触事件，一旦接触里面小盒子，就会鼠标指针就变成一个手掌类似事变。其实也不一定有一种 也有多种样式的事件，一旦该掉可以换成其他。cursor 属性规定要显示的光标的类型（形状）。 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 C..
点击不同div,变换不同的背景图片，再点击变回原图
qq_42360843的博客
11-16 1528
废话不多说。上代码 效果 当点击“点赞”，背景图片变。点击“关注”，背景图片变。再点击div时，图片变回原样。 .yjtxt-hbox .icon-group li .dianzan.active{ background: url(…/images/yj-icon1-hover.png) no-repeat 45px 18px; height:50px; } .yjtxt-hbox .icon...
原生css实现点击更换背景图的方法 :focus的使用方法
不染-9732
03-08 1363
使用:focus实现点击更换背景图 1.效果：不使用组件的情况下，利用原生的js实现点击修改背景的效果 2.代码 在行内使用 tabindex=“1” 的形式，让 :focus 生效 html部分 <ul> <li @click="gotoHomepage" tabindex="1">首页</li> <li @click="gotoDate" tabindex="2">数据</li> <li @
用JS实现点击DIV改变背景样式，再次点击后背景恢复
chiyu5739的博客
12-02 1505
将事件onclick加入到目标的div标签里，通过点击事件函数调用，记住在chrome下将颜色写成RGB的色值方式，写成16进制的无效（#******）； HTML代码： <divstyle="background-color:#FFF;"class="list_collecti...
纯CSS实现图片切换（按键切换/自动切换）
热门推荐
夕降巫咸的博客
12-12 2万+
本篇文章主要是实现通过纯CSS实现图片切换和定时切换 一、通过点击切换 效果图如下 html &lt;div id="hewenqislider" class="csslider"&gt; &lt;input type="radio" name="slides" id="slides_1" checked /&gt; &lt;input t
点击改变网页图片背景
zgqtxwd的专栏
05-01 410
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
CSS学习笔记
YuKing_HONG的博客
10-17 1487
个人学习PINK老师课程的笔记。个人笔记写得不好，敬请见谅，如果有问题没关系，那是正常的。记错了欢迎指出了。
js 实现简单的点击div改变背景颜色
qq_40072583的博客
07-19 1万+
思路：点击div改变背景颜色，是通过判断点击的次数，达到改变背景颜色，主要运用了数的加，累加。 效果： 代码； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js实现点击div改变背景颜色</title> &l...
【CSS基础】基础选择器+字体文本相关样式
qq_59084325的博客
09-12 1448
【CSS基础】基础选择器+字体文本相关样式（超详细）
html图片点击切换背景,CSS 实现鼠标指向切换背景图片
weixin_34570507的博客
06-05 694
页头顶部导航点击量： 占比： %较上月同比：%CSS：ul.blue_box{ padding:0px; margin:0px; list-style:none; background:url(../images/blue_box_01.png) no-repeat top center; width:160px; height:105px; padding:25px 0px 0px 20px; ...
CSS3实现的点击按钮背景图片不断切换的JS代码
06-12
CSS3实现的点击图片下方按钮，文字的背景会出现切换效果
CSS点击切换图片
weixin_44567226的博客
07-07 1万+
开发工具与关键技术：Dreamweaver，CSS 作者：李建威 撰写时间：2019年07月07日 由HTML和CSS组成，因为篇幅的原因这里直接上预览图： 切换前 切换中： 切换成功： 图片自行在CSS文件引用 HTML代码： <!doctype html> <html> <head> <meta charset="utf-8"> <...
css 简单的点击按钮更换展示的图片
yedaiyang的博客
11-30 9369
//设置一张图片    //设置控件   1   2   3 //调用js    //查找控件并且赋于值    var but1 = document.getElementById("but1");    var but2 = document.getElementById("but2");    var but3 = document.getElementById("b
唯一正确的使用CSS修改背景图片的方法，全网打假
qq_41791604的博客
09-15 593
正确的CSS修改背景图片亮度的方法
css html js 点击改变图片
jialan75的博客
02-09 289
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
html+css+js基础问答
qq_43751465的博客
08-26 5325
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
点击按钮切换图片
m0_56188968的博客
05-01 210
首先配置好路径，在文件夹中放入图片 写入body按钮，自己按照需求设置css样式 进入正题 效果展示
js制作九九乘法表
任聪聪的博客
10-28 690
Document for(var a= 1; a < 10; a++){ for(var b = 1; b <=a; b++ ){ var c = a *b ; document.write(b,"*",a,"=",c," "); } document.write("") }
动态修改元素的背景图片
最新发布
zhang_zan
08-15 205
动态设置元素背景图片
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值