div悬浮功能（已验证）

一时失言乱红尘 2023-06-27 04:30 37阅读 0赞

先看效果图：  
（鼠标放入div中就字体会改变颜色，项目在的需求）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NDQ2Ng_size_16_color_FFFFFF_t_70]  
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天半，哈哈哈）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NDQ2Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200103144928905.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NDQ2Ng==,size_16,color_FFFFFF,t_70