纯html + css 实现鼠标悬浮动态效果

给刚学网页css+html的入门者的一个小案例，代码简单

html布局：

《head>
    
    
    
    


《body>
  《div class="box">
      

         热门新品
         更多>
      
  

    

      

         
华为手表
     开始进入
      
      
    
  

      

         
华为手表
         点击进入
      
      
    
  

      

         
华为手机
       点击进入
      
      
    
  

      

         
华为荣耀
       点击进入
      
      
    
  

      

         
华为Pro30
   点击进入
      
      
    
  

      

         
华为mate
         点击进入
      
      
    
  

      

         
华为精品
         点击进入
      
      
    
  

      

         
华为nova3
         点击进入
      
      
    
  
  
  
css样式：
*{
    margin:0;
    padding:0;
}
body{
    font-family:"微软雅黑";
    background-color:#ddd;
} 
.box{
    width:1024px;
    height:400px;
    background:#fff;
    margin:30px auto;
    padding:20px;
}
.box .head span{
    font-size:18px;
    color:#333;
}
.box .head{
    margin-bottom:20px;
}
.box .head a{
    text-decoration:none;
    float:right;
    font-size:15px;
    color:#CD0707; 
}
.box .head a:hover{
    color:#F00;
}
.box ul li{
    width:210px;
    height:140px;
    list-style:none;
    position:relative;
    float:left;
    margin-left:30px;
    margin-bottom:30px;
    overflow:hidden;
}
.box ul li .deatil{
    width:210px;
    height:140px;
    background:rgba(0,0,0,0.7);
    position:absolute;
    top:-240px;
    -webkit-transition:all 0.3s ease; 
    -o-transition:all 0.3s ease;      
    -moz-transition:all 0.3s ease;    
    -ms-transition:all 0.3s ease;     
}

.box ul li .deatil h2{
    font-size:18px;
    color:#fff;
	margin-bottom:20px;
    text-align:center;
    padding-top:30px;
    }

.box ul li .deatil a{
    font-size:15px;
    display:block;
    color:#fff;
    background-color:#F00;
    text-decoration:none;
    width:100px;
    height:40px;
	
    text-align:center;
    line-height:40px;
    margin:0 auto;
}
.box ul li:hover .deatil{
    top:0;
}

			    						    						    					    					    					    		
常见问题
 所有VIP可以商用吗，会不会有版权问题？
本站提供的源码大部分可以作为源码开发参考和学习，部分开源可商用。
 账号可以分享给其他人使用吗？
您好，账号禁止共享，我们有验证机制的，会自动封号处理，谢谢配合。
 如果遇到问题怎么联系解决呢？
最快的途径是在导航菜单选择提交【售后】会在24小时处理
 下载的源码可以使用吗？
我们会在显著的地方表明【已测试】，显示已测试的都是小编测试过 。
		    					    			
 1. 本站所有资源来源于用户上传和网络，因此不包含技术服务请大家谅解！

2. 本站不保证所提供下载的资源的准确性、安全性和完整性，资源仅供下载学习之用！如有链接无法下载、失效或广告，请联系客服处理！

3. 您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容资源！如用于商业或者非法用途，与本站无关，一切后果请用户自负！

4. 如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！

5.如有侵权请联系客服邮件770973008@qq.com


原文链接：https://www.56admin.com/19737.html，转载请注明出处。