• 鼠标滑过图片添加边框图片无位移[xyytit]


    实现下面的效果,鼠标滑过图片添加边框图片无位移——鼠标滑过,图片只是加了边框,不会晃动:

    参考代码:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
     3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
     4 <title></title>
     5 <style type="text/css">
     6 a{float:left;}//不可修改
     7 a:hover {
     8 width: 182px;//图片减去两边边框的宽度
     9 height: 302px;//图片减去两边边框的宽度
    10 border: 4px solid #fff;//边框宽度,可以调整
    11 overflow: hidden;//不可修改
    12 }
    13 a:hover img {
    14 margin: -4px;//隐藏图片周围部分,对应边框宽度,可以调整
    15 }
    16 </style>
    17 </head>
    18 <body>
    19 <div class="T-s-l">
    20     <a href="">  <img width="190" heigh="310" src="http://img03.taobaocdn.com/imgextra/i3/272205633/T2jd1xXsBXXXXXXXXX-272205633.jpg"> </a>             
    21     <a href="">  <img width="190" heigh="310" src="http://img.taobaocdn.com/bao/uploaded/T1ZVINFXdaXXb1upjX.jpg"> </a>
    22     <a href="">  <img width="190" heigh="310" src="http://img.taobaocdn.com/bao/uploaded/T1XJYQFXJcXXb1upjX.jpg"> </a>                             
    23     <a href="">  <img width="190" heigh="310" src="http://img01.taobaocdn.com/imgextra/i1/122343103/T2YqFsXuxaXXXXXXXX-122343103.jpg"> </a>
    24 </div>
    25 </body></html>
  • 相关阅读:
    扩展欧几里得算法
    单源最短路径—Dijkstra算法
    欧拉定理,费马小定理
    欧拉函数
    Trie 字典树
    平衡树——Treap,Splay
    NOI2009 开关
    银河英雄传说
    线段树与延迟标记
    c++常见变量的极值
  • 原文地址:https://www.cnblogs.com/xyyt/p/3468356.html
Copyright © 2020-2023  润新知