Jquery中文网 > 脚本编程 > javascript > 正文新闻列表鼠标滑过，显示单条详情

新闻列表鼠标滑过，显示单条详情

发布时间：2017-06-24 编辑：www.jquerycn.cn

jquery中文网为您提供新闻列表鼠标滑过，显示单条详情等资源，欢迎您收藏本站，我们将为您提供最新的新闻列表鼠标滑过，显示单条详情资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>demo</title> <style type="text/css"> body { font-size:12px; } ul, h2, p { margin:0; padding:0; } .list { list-style:none; width:400px; position:relative; vertical-align:middle; } .list li { border-bottom:solid 1px #eee; cursor:default; position:relative; width:100%; } .list h2 { font-size:100%; font-weight:normal; padding:.5em;} .list span { position:absolute; right:1em; top:.5em; font-family:Verdana; font-size:90%;} .list div { display:none; position:relative; height:70px; } .list div img { float:left; margin:.8em 1em; background:#6FF; } .list div p { padding:.8em; } .list div p strong { display:block; margin-bottom:.5em; } .list li:hover, .list li.hover { height:auto; } .list li:hover div, .list li.hover div { display:block; } .list li:hover h2, .list li.hover h2, .list li:hover span, .list li.hover span { background:#5B86BB; color:#fff; } </style> </head> <body> <ul class="list" id="demo"> <li> <h2>蓝色理想之经典论坛</h2> <span>2010-04-19</span>

新闻列表鼠标滑过，显示单条详情

蓝色理想之经典论坛大家都来经典论坛积极交流吧！

</li> <li> <h2>蓝色理想之经典论坛</h2> <span>2010-04-19</span>

新闻列表鼠标滑过，显示单条详情

蓝色理想之经典论坛大家都来经典论坛积极交流吧！

</li> <li> <h2>蓝色理想之经典论坛</h2> <span>2010-04-19</span>

新闻列表鼠标滑过，显示单条详情

蓝色理想之经典论坛大家都来经典论坛积极交流吧！

</li> <li> <h2>蓝色理想之经典论坛</h2> <span>2010-04-19</span>

新闻列表鼠标滑过，显示单条详情

蓝色理想之经典论坛大家都来经典论坛积极交流吧！

</li> <li> <h2>蓝色理想之经典论坛</h2> <span>2010-04-19</span>

新闻列表鼠标滑过，显示单条详情

蓝色理想之经典论坛大家都来经典论坛积极交流吧！

</li> <li> <h2>蓝色理想之经典论坛</h2> <span>2010-04-19</span>

新闻列表鼠标滑过，显示单条详情

蓝色理想之经典论坛大家都来经典论坛积极交流吧！

</li> <li> <h2>蓝色理想之经典论坛</h2> <span>2010-04-19</span>

新闻列表鼠标滑过，显示单条详情

蓝色理想之经典论坛大家都来经典论坛积极交流吧！

</li> </ul> </body> </html> <script type="text/javascript"> (function(){ var obj=document.getElementById("demo"); var liObj=obj.getElementsByTagName("li"); var length=liObj.length; for(var i=0;i<length;i ){ liObj[i].onmouseover=function(){ this.className =" hover"; } liObj[i].onmouseout=function(){ this.className=this.className.replace('hover',''); } } })();

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
新闻列表鼠标滑过，显示单条详情
 40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
 JQuery实现鼠标滑过显示导航下拉列表
 鼠标的滚轮失灵怎么办？
jQuery新闻滚动插件 jquery.roller.js
js 实用漂亮的图文并排列表效果
 Highcharts教程(9) PlotOptions之area区域图
 电脑显示器颜色显示不正常问题总结
 网页超级链接
 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三

上一篇：js点击按钮禁止页面所有表单控件不可用下一篇：js QQ在线客服代码

[关闭]

最近更新

浏览排行