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>
  • 相关阅读:
    锁定/解锁账户BAPI
    ME5A报表增强
    PS 独立集中标识下修改项目采购类型增强
    生产版本BAPI
    生产订单工艺路线修改
    销售订单BAPI增强
    Office RTF远程模板注入
    CVE20211732 LPE漏洞分析
    C/C++ Qt 数据库与ComBox多级联动
    C/C++ Qt 数据库SqlRelationalTable关联表
  • 原文地址:https://www.cnblogs.com/xyyt/p/3468356.html
Copyright © 2011-2022 走看看