先看效果图:
(鼠标放入div中就字体会改变颜色,项目在的需求)
html的代码
<a href="/certificates/announcementDetail?id=${pro.id }" class="nav-mark-btn1" >
<span class="ptSpan">
<img class="ptSpanImg" src="${pro.image }" alt="" />
</span>
<div class="nav-mark-btn1-1">
<h3 class="titleH3">${pro.title }
</h3>
<p>
<span style="width: 100px; height: 30px; color: #757575;"><i
class="fa fa-clock-o" aria-hidden="true"></i>${pro.timepub }
</span> <span style="width: 20px; height: 30px; color: #757575;"><i
class="fa fa-eye"></i> 浏览量 ${pro.number }</span>
</p>
</div>
</a>
css的代码:
.nav-mark-btn1 {
display: block;
overflow: hidden;
width: 1000px;
height: 160px;
}
.nav-mark-btn1 :hover {
color: #db1c21;
/* font-size:20px; */
}
.ptSpan :hover+.titleH3 {
color: #db1c21;
}
.ptSpan {
display: inline-block;
width: 260px;
height: 160px;
float: left;
}
.ptSpanImg {
width: 100%;
height: 100%;
cursor: pointer;
transition: all 0.6s;
}
.ptSpanImg:hover {
transform: scale(0.8);
}
.nav-mark-btn1-1 {
padding-left: 290px;
height: 160px;
}
.titleH3 {
height: 108px;
line-height: 1.5;
margin-bottom: 20px;
}
我这里写成动态的了,需求不同要修改一下,但是页面修改已经可以了的
(ps:这个功能写了1天半,哈哈哈)