html 纯CSS - 悬停的缩略图

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 纯CSS - 悬停的缩略图相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
</head>
<body>

<h2>Thumbnail Image</h2>
<p>Click on the image to enlarge it.</p>

<a target="_blank" href="img_forest.jpg">
  <img src="img_forest.jpg" alt="Forest" style="width:40%">
</a>

</body>
</html>

以上是关于html 纯CSS - 悬停的缩略图的主要内容，如果未能解决你的问题，请参考以下文章

当鼠标悬停在没有css的标题上时，如何使缩略图消失？

Share Code | Javascript & HTML & CSS链接悬停显示图像效果

html如何设置鼠标悬停在缩略图时，上面的大图切换为该缩略图的大图？

仅在 html css 中将缩略图的背景图像网格放大到更高的分辨率

通过缩略图悬停图像交换？

如何为缩略图悬停添加标题 - Bootstrap？