html中怎么点按钮切换图片,如何只用css实现点击按钮切换图片

在css中，可以使用“:target”选择器，配合display属性来实现点击按钮切换图片，只需要给元素设置“元素:target{display:block;}”语句即可。“:target”选择器可用于选取当前活动的目标元素。

本教程操作环境：windows7系统、HTML5&&CSS3版，DELL G3电脑。

今天使用CSS中的:target选择器来实现点击按钮切换相对应的图片的demo，此demo也可以使用JS来实现。

demo的结构：img1

img2

img3

img4

demo的CSS样式：

padding:5px 10px;

border:1px solid #000;

color:#fff;

background-color:#888;

text-decoration:none;

}

width:400px;

height:400px;

border:2px solid #ccc;

margin-top:20px;

position:absolute;

top:20px;

left:10px;

display:none;

padding:20px;

}

p:target{

display:block;

}

运行的效果：

html中怎么点按钮切换图片,如何只用css实现点击按钮切换图片相关推荐

angular点击按钮弹出页面_Axure RP8：如何做出点击按钮切换页面效果？
如何利用Axure RP8做出点击按钮切换页面效果?一起来文中看看~ 先来看一下页面的效果图:点击不同的按钮,切换不同的页面.(是web端和手机端都很常见的交互效果) 实现这一效果大致要分为三个步骤: ...
html点击按钮动复制推广地址,JavaScript实现点击按钮就复制当前网址
JavaScript实现点击按钮就复制当前网址点击按钮复制当前网址: 在大量的网站都有这样的功能,当点击一个按钮的时候可以复制当前页面的地址,以此可以方便网站用户对链接的存储,同时也便于网站的推广, ...
html让图片一直旋转,css如何设置不停旋转的图片？
css如何设置不停旋转的图片?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css如何设置不停旋转的图片? 这个效果实现起来其实并不困难,代码清单如下: ...
php按钮如何加显示不出来,javascript - 点击按钮显示更多，自定义变量显示不出来？...
点击按钮显示更多,自定义变量显示不出来? 提示错误信息:. 想要达到的效果: 点击按键一次更多,多显示3条信息显示更多支持小明1这是我的个性签名 288个赞同本回答分成[旅游版]和[日常版] ...
html背景图片在底部,CSS兑现固定DIV层背景图片且底部显示
CSS实现固定DIV层背景图片且底部显示 /*CSS缩写形式*/ div { background:url(/images/about_bg.jpg) no-repeat fixed; backgro ...
html图片缩小属性,CSS属性实现同比例缩小图片
本文向大家描述一下如何使用CSS属性同比例缩小图片,一般情况下如果要把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可. 符合Web标 ...
css实现点击内容切换div
相信很多小伙伴都看过,点击切换内容技术,今天我们简单说一下在不用js的情况下实现内容切换. html代码: css代码: 完成效果: 源代码如下: 有用的到的地方可以直接复制代码,可以直接使用哦~也可 ...
Java按钮哪个方法响应_当用户点击按钮时,Java程序采用什么方法来响应?()
案例分析一:假定CPU的主频是500MHz.硬盘采用DMA方式进行数据传送,其数据传输率为4MB/s, 每次DMA传输的数据量为8KB, 要求没有任何数据传输被错过. 如果CPU在DMA初始化设置和启 ...
不用背景图片，只用css代码实现面包屑样式
在公司做一个关于面包屑的项目时发现用图片实现需要用图片来解决,但是图片加载很慢,就上网查了一下一般实现的方法,自己总结了一下,实现的方法也是主要用css的boder的属性来巧妙的实现箭头,html代码 ...
html弄多个按钮_如何为HTML / CSS页面添加更多按钮？
I want to make a single page website and it will have huge content. Suppose it has 1000 photos on it ...

html中怎么点按钮切换图片,如何只用css实现点击按钮切换图片

html中怎么点按钮切换图片,如何只用css实现点击按钮切换图片相关推荐

最新文章

热门文章