Home  >  Article  >  Web Front-end  >  How to switch pictures by clicking a button using only css

How to switch pictures by clicking a button using only css

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-05-06 17:36:3612324browse

In CSS, you can use the ":target" selector and the display attribute to switch images by clicking the button. You only need to set the "Element:target{display:block;}" statement for the element. The ":target" selector can be used to select the currently active target element.

How to switch pictures by clicking a button using only css

The operating environment of this tutorial: windows7 system, HTML5&&CSS3 version, DELL G3 computer.

Today we use the :target selector in CSS to implement a demo of clicking a button to switch the corresponding image. This demo can also be implemented using JS.

Structure of demo:

        <a href="#img1">img1</a>
	<a href="#img2">img2</a>
	<a href="#img3">img3</a>
	<a href="#img4">img4</a>
	<p id="img1"><img src="img/p001.jpg"/></p>
	<p id="img2"><img src="img/p002.jpg"/></p>
	<p id="img3"><img src="img/p003.jpg"/></p>
	<p id="img4"><img src="img/p004.jpg"/></p>

CSS style of demo:

<style>
	a{
		padding:5px 10px;
		border:1px solid #000;
		color:#fff;
		background-color:#888;
		text-decoration:none;
	}
	p{
		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;
	}
  </style>

Effect of operation:

Related learning Recommended: css tutorial

The above is the detailed content of How to switch pictures by clicking a button using only css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn