平武建站

如何解决多行图片hover加边框会把下面的图片挤到别处的问题-创新互联

本篇内容主要讲解“如何解决多行图片hover加边框会把下面的图片挤到别处的问题”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何解决多行图片hover加边框会把下面的图片挤到别处的问题”吧!

创新互联公司主要从事成都网站制作、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务鹤山,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

问题：

遇到多行多列排列的图片时，hover上去加边框会把下面的图片挤到别处

============================================================

注意：

IE11以下浏览器加载图片会默认给它加一个1px的边框

解决方法：对图片设置border:none

=============================================================

hover加边框解决方案：

原先：



代码如下:







    • 1. 对元素设置透明边框（推荐）：



    代码如下:

    li{
    border:2px solid transparent;
    }
    li:hover{
    border:2px solid red;
    }



    2. 对元素外再包裹一层div

    更改后：



    代码如下:









    • 样式：



    代码如下:

    li{
    wdith:468px;
    }
    div{
    width:468px;
    margin:2px;
    padding:10px;
    background-color:#fff;
    }
    div :hover{
    margin:0;
    border:2px solid red;
    }



    另外：

    使用outline IE 7、8 不支持。

    但它是显示在元素上面不会对元素加边框。不考虑IE兼容的可以直接用outline代替border

    到此，相信大家对“如何解决多行图片hover加边框会把下面的图片挤到别处的问题”有了更深的了解，不妨来实际操作一番吧！这里是创新互联建站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！


    分享文章：如何解决多行图片hover加边框会把下面的图片挤到别处的问题-创新互联
    标题链接：http://pwwzsj.com/article/cooojg.html

    其他资讯