当鼠标经过某一元素时，我们想给已有的样式添加或移除新的css，或者显示隐藏某个子元素，下面的Jquery hover的用法轻松实现，当然方法很多，我这里用一个自己做的新闻列表举例。
直接上代码，最终代码效果图片点下面的：运行代码 来看
<!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="../js/jquery-1.11.3.min.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="" >普京签署法令 俄罗斯停止履行《中导条约》</a>
<a class="ww2"><img src="https://www.qiquanji.com/data/img/dmj/201903051551752398102282.jpg"/><span>真心帮忙还是请君入瓮？特朗普为俄叙反恐支招是何居心</span></a>
</div>
<div class="uu ">
<a class='ww1' href="" >8岁孩子被老师批评太好动 竟牵出一家五口集体铅中毒</a>
<a class="ww2"><img src="https://www.qiquanji.com/data/img/dmj/201903051551752398112033.jpg"/><span>真心帮忙还是请君入瓮？特朗普为俄叙反恐支招是何居心</span></a>
</div>
<div class="uu ">
<a class='ww1' href="" >恭喜！火箭新援获续约，22+25小鲜肉仍雪藏，4战</a>
<a class="ww2"><img src="https://www.qiquanji.com/data/img/dmj/201903051551752398102282.jpg"/><span>真心帮忙还是请君入瓮？特朗普为俄叙反恐支招是何居心</span></a>
</div>
<div class="uu ">
<a class='ww1' href="" >湖人暂停与安东尼签约谈判 计划寻找中锋补强内线</a>
<a class="ww2"><img src="https://www.qiquanji.com/data/img/dmj/201903051551752711831717.jpg"/><span>真心帮忙还是请君入瓮？特朗普为俄叙反恐支招是何居心</span></a>
</div>
</body>
</html>
原文链接：https://www.qiquanji.com/post/7589.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知