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

作者：袖梨 2022-07-02

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.*w**3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<title>demo</title>
<style type="text/<a href=" http: target="_blank">css">
body { font-size:12px; }
ul, h2, p { margin:0; padding:0; }
.list { list-style:none;  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;  }
.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>

<ul class="list" id="demo">
	<li>
		<h2>蓝色理想之经典论坛</h2>
		<span>2010-04-19</span>
		<div> 
			<p><strong>蓝色理想之经典论坛</strong>大家都来经典论坛积极交流吧！</p>
		</div>
	</li>
	<li>
		<h2>蓝色理想之经典论坛</h2>
		<span>2010-04-19</span>
		<div> 
			<p><strong>蓝色理想之经典论坛</strong>大家都来经典论坛积极交流吧！</p>
		</div>
	</li>
	<li>
		<h2>蓝色理想之经典论坛</h2>
		<span>2010-04-19</span>
		<div> 
			<p><strong>蓝色理想之经典论坛</strong>大家都来经典论坛积极交流吧！</p>
		</div>
	</li>
	<li>
		<h2>蓝色理想之经典论坛</h2>
		<span>2010-04-19</span>
		<div> 
			<p><strong>蓝色理想之经典论坛</strong>大家都来经典论坛积极交流吧！</p>
		</div>
	</li>
	<li>
		<h2>蓝色理想之经典论坛</h2>
		<span>2010-04-19</span>
		<div> 
			<p><strong>蓝色理想之经典论坛</strong>大家都来经典论坛积极交流吧！</p>
		</div>
	</li>
	<li>
		<h2>蓝色理想之经典论坛</h2>
		<span>2010-04-19</span>
		<div> 
			<p><strong>蓝色理想之经典论坛</strong>大家都来经典论坛积极交流吧！</p>
		</div>
	</li>
	<li>
		<h2>蓝色理想之经典论坛</h2>
		<span>2010-04-19</span>
		<div> 
			<p><strong>蓝色理想之经典论坛</strong>大家都来经典论坛积极交流吧！</p>
		</div>
	</li>
</ul>

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

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

相关文章

精彩推荐