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>
  • 相关阅读:
    linux下清空文件的几种方式以及对比
    远程桌面连接无法验证您希望连接的计算机的身份-mac连接远程桌面
    Linux配置临时IP和网关命令
    linux(centos、ubuntu)网卡配置文件不生效
    负载均衡
    Zookeeper基础使用机制原理
    高性能RPC框架选型
    事务隔离机制
    一致性协议Raft
    机器学习入门
  • 原文地址:https://www.cnblogs.com/xyyt/p/3468356.html
Copyright © 2011-2022 走看看