请写一个简单的幻灯效果页面，不使用JS来完成怎么做

最新推荐文章于 2021-02-08 11:06:24 发布

原创最新推荐文章于 2021-02-08 11:06:24 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#target伪类 #css3

css(css3) 同时被 2 个专栏收录

8 篇文章

订阅专栏

前端笔试题

2 篇文章

订阅专栏

本文通过一个简单的HTML页面展示了如何使用CSS3的:target伪类来改变被链接激活的目标元素的样式。当点击链接时，目标图片将显示在另一张图片之上。

考点：CSS3 :target伪类

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #cont {
            position: relative;
            height: 100px;
        }
        img {
            position: absolute;
            width: 100px;
            height: 100px;
            z-index: 1;
        }
        img:first-child,
        img:target {
            z-index: 2;
        }
    </style>
</head>
<body>
<div id="cont">
    <img id="img1" src="a.jpg">
    <img id="img2" src="b.jpg">
</div>
<div>
    <a href="#img1">one</a>
    <a href="#img2">two</a>
</div>
</body>
</html>