1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

jquery自己做的新闻列表分享

当鼠标经过某一元素时,我们想给已有的样式添加或移除新的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

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: