css怎么实现鼠标点击后显示图片效果

介绍

现在的网站大多数都涉及到图片展示和交互效果。在设计网站交互效果的时候，鼠标点击生成图片效果是很常见的。如：当你点击导航栏里面的一个按钮，它会显示一个你想要的效果图，这样的效果不仅可以让网页看起来非常的有条理性，而且还可以为用户设计更好的体验感。其实，这个效果你通过CSS可以非常轻易地实现。

实现思路

我们一般是通过用CSS实现:hover来达到一些悬浮效果，但是通过点击才会展示图片的话，hover就不行了，所以我们需要用到其他CSS属性：checked和target。具体思路是，当我们点击到一个元素的时候，我们使用:checked，它表示当一个复选按钮被勾选后，就会出现某个效果。所以我们在点击的时候同样也使用:checked属性，并且它会匹配相应的URL链接中的ID属性。我们可以使用这个ID属性来设置我们想要展示的图片。而要使得点击后消除这个效果，我们可以通过使用伪类 ：target 来解决。

代码实现

这里我举个例子来实现这个效果。首先，HTML部分需要有一个标有图片链接的列表，以及要展示的图片。代码如下：

HTML 

    <ul>
        <li>
            <a href="#image1">第一张图片</a>
        </li>
        <li>
            <a href="#image2">第二张图片</a>
        </li>
        <li>
            <a href="#image3">第三张图片</a>
        </li>
    </ul>
    <div class="gallery">
        <img src="image1.jpg" id="image1" alt="第一张图片" />
        <img src="image2.jpg" id="image2" alt="第二张图片" />
        <img src="image3.jpg" id="image3" alt="第三张图片" />
    </div>

在HTML代码中调用的图片需要加上ID属性，为作为锚点标识的图片创建一个ID属性很重要，可以在URL中引用它，如：example.com/page#ID。

现在我们需要用CSS来完成我们的图片展示效果，代码如下：

CSS

/* 隐藏所有图片 */
.gallery img {
    display: none;
}
/* 当目标点被 :target 选中，则展示图片 */
.gallery :target {
    display: block;
}
/* 显示图片的CSS布局 */
.gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
}
.gallery img {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

代码的第一个部分隐藏了所有的图片，随后的代码产生了一个：target规则，当图片锚点标识被选中时，展示相应的图片。

最后一个部分是对图片容器的CSS设置。

总结

通过本例我们学会了通过CSS来实现鼠标点击后显示图片效果。我们主要使用了:checked和：target伪类属性。这种效果的好处在于，它保证了用户可以立即看到图片展示，而不必向下滚动页面找到该图片展示。同时，这种方法可以大大减少网页的冗余，提高了网站的效率和页面加载速度。

欢迎大家尝试使用这种新的效果，通过多次项目实战来体验其中的做法和技巧。