<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .quan{ 315px; height:450px; border:#D87F15 1px solid; background:#CDD4DC; } .head{ background:#2A4F7B; color:#FFF; font:20px bold; text-indent:20px; } ul{ margin:0px; padding:0px; } li{ padding:11px; float:left; list-style:none; } h4{ margin:8px; } .span1{ background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon-01.jpg); background-repeat:no-repeat; background-position:0px 2px; text-indent:1em; margin:8px; } .span2{ background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon-01.jpg); background-repeat:no-repeat; background-position:0px 2px; text-indent:1em; margin:8px; } img{ border:#FFF 2px solid; } a:hover img{ border:#D87F15 2px solid; } /* ul,li{ margin:0px; padding:0px; } ul{ border:1px red solid; 420px; } ul li{ 140px; float:left; border:1px blue solid; list-style:none; } ul li a:link img{ border:1px red solid; } ul li a:hover img{ border:1px blue solid; } */ </style> </head> <body> <div class="quan"> <div class="head">精彩视频</div> <ul> <li> <a href="#"><img src="图片素材/video-01.jpg" /></a> <h4>享受丰硕的成果</h4> <p class="span1">时长：80秒</p> <p class="span2">点击：45356</p> </li> <li> <a href="#"><img src="图片素材/video-01.jpg" /></a> <h4>享受丰硕的成果</h4> <p class="span1">时长：80秒</p> <p class="span2">点击：45356</p> </li> <li> <a href="#"><img src="图片素材/video-01.jpg" /></a> <h4>享受丰硕的成果</h4> <p class="span1">时长：80秒</p> <p class="span2">点击：45356</p> </li> <li> <a href="#"><img src="图片素材/video-01.jpg" /></a> <h4>享受丰硕的成果</h4> <p class="span1">时长：80秒</p> <p class="span2">点击：45356</p> </li> </ul> </div> </body> </html>
将img的border和a:hover的border设置成不一样就会发生有趣的情况。