CSS是前端开发中不可避免的一个部分,它对网页的样式有着举足轻重的影响。CSS有很多种用法,其中之一是实现图片的隐藏和显示。
.hidden {
display: none;
}
上述代码中,我们定义了一个名为hidden的类,它的display属性值被设置为none。这样,当我们在HTML中使用该类时,元素将被隐藏,包括其中包含的图片。
.visible {
display: inline-block;
}
如果我们想让图片重新显示,可以定义一个visible类,并将它的display属性值设置为inline-block。这时在HTML中使用visible类的元素就会重新显示。
还有一种情况是我们想在鼠标悬停时显示图片。这时我们可以使用:hover伪类。
.hidden:hover {
display: inline-block;
}
在上述代码中,我们使用了:hover伪类,表示当鼠标悬停在被hidden类隐藏的元素上时,将该元素的display属性值设置为inline-block,从而显示其中的图片。