zoukankan      html  css  js  c++  java
  • 鼠标滑过图片添加边框图片无位移[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>
  • 相关阅读:
    最大流基础
    转一篇写期望的日志
    poj3267The Cow Lexicon(dp)
    poj3026Borg Maze(bfs+MST)
    poj2226Muddy Fields(二分图的最小点覆盖)
    poj1035Spell checker(字符串模拟)
    poj1422Air Raid(最小路径覆盖)
    poj3020Antenna Placement(最小路径覆盖)
    [JSOI2009]火星藏宝图
    [SHOI2007]书柜的尺寸
  • 原文地址:https://www.cnblogs.com/xyyt/p/3468356.html
Copyright © 2011-2022 走看看