代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.kk{
width: 450px;
height: 400px;
border: 1px solid darkgrey;
margin: 50px auto;
}
.kk .uu{
width: 430px;
height: 40px;
line-height: 40px;
text-align: left;
overflow: hidden;
}
.kk .uu a{
text-decoration: none;
color: black;
}
.kk .uu.uu_01{
width: 430px;
height: 90px;
border: 2px solid darkcyan;
position: relative;
}
.kk .uu.uu_01 .ww1{
display: none;
width: 430px;
height: 40px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
overflow: hidden;
}
.kk .uu.uu_01 .ww2{
display: block;
width: 430px;
height: 90px;
position: absolute;
top: 0;
left: 0;
overflow: 2;
}
.kk .uu.uu_01 .ww2 img{
display: block;
width: 90px;
height: 70px;
padding: 10px;
/*vertical-align: middle;*/
float: left;
transition: transform 0.6s linear;
}
.kk .uu.uu_01 .ww2 img:hover{
transform: scale(1.1);
}
.kk .uu.uu_01 a .ww2 span{
display: block;
width: 330px;
height: 90px;
font-size: 5px;
line-height: 15px;
text-align: center;
float: left;
}
</style>
<script src="jquery-1.11.3.min.js.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(function(){
$('.uu').mouseenter(function(){
$(this).addClass('uu_01').siblings('.uu').removeClass('uu_01');
})
})
})
</script>
</head>
<body>
<div class="kk">
<div class="uu uu_01">
<a class='ww1' href="" >俄乌紧张形势升温 卫星照揭俄部署更多S400防空导弹</a>
<a class="ww2"><img src="tt/t01.jpg"/><span>俄乌紧张形势升温 卫星照揭俄部署更多S400防空导弹</span></a>
</div>
<div class="uu ">
<a class='ww1' href="" >暖！掉入纽约下水井的婚戒找到了，情侣也找到了</a>
<a class="ww2"><img src="tt/t02.jpg"/><span>暖！掉入纽约下水井的婚戒找到了，情侣也找到了</span></a>
</div>
<div class="uu ">
<a class='ww1' href="" >太阳vs湖人五佳球：艾顿空接虐筐 詹皇一飞冲天滑翔暴扣</a>
<a class="ww2"><img src="tt/t03.jpg"/><span>太阳vs湖人五佳球：艾顿空接虐筐 詹皇一飞冲天滑翔暴扣</span></a>
</div>
<div class="uu ">
<a class='ww1' href="" >波罗申科希望德国加强军事存在，指出俄罗斯下一步的军事目标</a>
<a class="ww2"><img src="tt/t04.jpg"/><span>波罗申科希望德国加强军事存在，指出俄罗斯下一步的军事目标</span></a>
</div>
<div class="uu ">
<a class='ww1' href="" >媒体：国足将进行魔鬼体能特训 亚洲杯至少不能跑输对手</a>
<a class="ww2"><img src="tt/t05.jpg"/><span>媒体：国足将进行魔鬼体能特训 亚洲杯至少不能跑输对手</span></a>
</div>
<div class="uu ">
<a class='ww1' href="" >弱旅不放硬仗不软 两战净胜69分的新男篮谁不爱？</a>
<a class="ww2"><img src="tt/t06.jpg"/><span>弱旅不放硬仗不软 两战净胜69分的新男篮谁不爱？</span></a>
</div>
</body>
</html>
代码效果图片：
原文链接：https://www.qiquanji.com/post/7734.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知