div悬浮功能（已验证）

先看效果图：
（鼠标放入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 }
							&nbsp;</span> <span style="width: 20px; height: 30px; color: #757575;"><i
							class="fa fa-eye"></i>&nbsp;浏览量 ${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天半，哈哈哈）