踢掉某个li

<!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>
View Code
将img的border和a:hover的border设置成不一样就会发生有趣的情况。