描述：
实现，书籍栏目，具体查看，效果展示图。。。这里是以《论语》书籍的封面为案例展示，也可更换为其它的内容等，可根据自己的需要进行更换，还有就是可再添加jQuery的使用，方便选择修改等。
效果展示：
鼠标放置在图片上的效果，如下图所示：
完整代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>书籍</title>
<style>
.book{
width: 300px;
height: 500px;
background-color: antiquewhite;
padding: 10px;
border-radius: 10px;
float: left;
margin: 10px 20px;
}
.book > div{
width: 300px;
height: 400px;
background-color: aqua;
background-image: url(./1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.book > span{
width: 300px;
height: 100px;
display: block;
font-size: 30px;
text-align: center;
line-height: 100px;
}
.book > div:hover{
background-image: none;
}
.book > div:hover span{
display: block;
text-align: center;
color: red;
}
.book > div > span{
padding:30px;
font-size: 30px;
display: none;
}
</style>
</head>
<body>
<h1>2022年7月28日</h1>
<div class="book">
<div><span>《论语》自宋代以后，被列为“<a href="https://baike.baidu.com/item/%E5%9B%9B%E4%B9%A6/899715?fr=aladdin" title="百度百科——儒家经典书籍|四书" target="_blank">四书</a>”之一，成为古代学校官定教科书和科举考试必读书。</span></div>
<span>《论语》</span>
</div>
<div class="book">
<div><span>《论语》自宋代以后，被列为“四书”之一，成为古代学校官定教科书和科举考试必读书。</span></div>
<span>《论语》</span>
</div>
<div class="book">
<div><span>《论语》自宋代以后，被列为“四书”之一，成为古代学校官定教科书和科举考试必读书。</span></div>
<span>《论语》</span>
</div>
<div class="book">
<div><span>《论语》自宋代以后，被列为“四书”之一，成为古代学校官定教科书和科举考试必读书。</span></div>
<span>《论语》</span>
</div>
<div class="book">
<div><span>《论语》自宋代以后，被列为“四书”之一，成为古代学校官定教科书和科举考试必读书。</span></div>
<span>《论语》</span>
</div>
</body>
</html>
