jquery自己做的新闻列表分享

时间：4年前阅读：5026

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

微信扫码关注

更新实时通知

jquery自己做的新闻列表分享

网友评论