Rumah > hujung hadapan web > html tutorial > CSS3的:not(:target)效果_html/css_WEB-ITnose

CSS3的:not(:target)效果_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-21 09:08:58
asal
1425 orang telah melayarinya

HTML:

<div>	<ul>		<li id='li1'>1</li>		<li id='li2'>2</li>		<li id='li3'>3</li>	</ul>	<a href='#li1'>a</a>	<a href='#li2'>b</a>	<a href='#li3'>c</a></div>
Salin selepas log masuk


CSS:

@keyframes act{	0%{background:red};	100%{background:white};}li:not(:target){	animation:act 1s ease-in;}
Salin selepas log masuk



进入页面的时候,就会执行li:not(:target),效果在三个li都可用


一旦点击激活target,li:not(:target)就意味着上一个激活的target:

首先点击a,激活target,li:not(:target)无效果

再点b,在第一个li处出现效果

是不是有点坑,呵呵哒。

他的用处就是在手动图片轮播的时候改变z-index的最佳利器!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan