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/mip/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/mip/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/mip/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/mip/data/img/dmj/201903051551752711831717.jpg"/><span>真心帮忙还是请君入瓮？特朗普为俄叙反恐支招是何居心</span></a> </div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知