您的位置：首页 > Web前端 > CSS

css 实现新闻列表鼠标悬浮时显示图片和内容简介

2017-03-13 13:45 681 查看
1.css 代码

*{margin:0;padding:0;}
.content{width:980px;margin:0 auto;}
.content .ee .tx p{display:block;}
.content .ee li p{overflow:auto;display:none;}
.content img{display:block;float:left;width:120px;height:80px;}
.content span{display:block;float:left;width:180px;margin-left:20px;}

2.html代码

<!DOCTYPE html>
<html>
<head>
<title>css 实现新闻列表鼠标悬浮时显示图片和内容简介</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
*{margin:0;padding:0;}
.content{width:980px;margin:0 auto;}
.content .ee .tx p{display:block;}
.content .ee li p{overflow:auto;display:none;}
.content img{display:block;float:left;width:120px;height:80px;}
.content span{display:block;float:left;width:180px;margin-left:20px;}

</style>
</head>
<body>
<div class="content">
<ul class="ee">
<li>
<h1>标题测试</h1>
<p>
<img src="bg.jpg">
<span>电话：400-682-5515<br/>地址：天津市和平区南京路219号天津中心写字楼9楼 </span>
</p>
</li>
<li>
<h1>标题测试</h1>
<p>
<img src="bg.jpg">
<span>电话：400-682-5515<br/>地址：天津市和平区南京路219号天津中心写字楼9楼 </span>
</p>
</li>
<li>
<h1>标题测试</h1>
<p>
<img src="bg.jpg">
<span>电话：400-682-5515<br/>地址：天津市和平区南京路219号天津中心写字楼9楼 </span>
</p>
</li>
</ul>
</div>
<script>
$('.content ul li').hover(function(){
$(this).addClass('tx').siblings().removeClass('tx')},function(){});
</script>
</body>
</html>


注意引用jQuery库


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航