【问题标题】:Can you make "an invisible border"?你能做“一个看不见的边界”吗?
【发布时间】:2011-08-13 00:49:04
【问题描述】:

我正在尝试make a navbar 作为练习。

我正在使用a:hover 在悬停的按钮周围添加一个实心边框。但是,这会使所有其他按钮移动边框的大小。

这个问题的正确解决方法是什么?我知道还有其他人(讨论过here),我特意尝试让边框“即使不悬停也不会占用空间”。我设置了border:transparent,希望它能做我想做的事,但它根本没有显示占用空间。

我知道我可以手动选择与背景相同的边框颜色并使其纯色,但这不是我想要的。有没有理智的方法来解决这个问题?

【问题讨论】:

    标签: html css border


    【解决方案1】:

    您最好的选择是为您的元素添加与边框大小相同的内边距或边距,并使边框的宽度为零,然后显示边框并使用a:hover 选择器删除内边距。

    这是一个示例。您通常也可以使用边距来执行此操作。

    a {
        display: inline-block;
        height: 2em; width: 100px;
        padding: 2px;
        background: #0ff;
    }
    
    a:hover {
        padding: 0;
        border :2px solid #000;
    }
    <a href="#">Hello World</a>

    【讨论】:

    • @Phliplip 的建议怎么样? (评论)
    • @Phliplip 的解决方案也可以,只要您不必支持 IE6。我已经处理了足够长的时间,以至于我自动转到了完全跨浏览器的解决方案。使用最适合您的网站和客户需求的方式。
    【解决方案2】:

    您可以使用outline CSS 属性代替边框,它的作用类似于边框,但在大小计算中不考虑在内。

    但是,这确实存在一些问题,not being supported by IEs 7 or earlier

    【讨论】:

      【解决方案3】:

      border:transparent 表示border: transparent 0 none

      如果您在使用速记语法时未指定属性,则将所有属性重置为默认值。

      你需要给它一个边框样式和一个边框宽度。

      【讨论】:

        【解决方案4】:

        这不能像您期望的那样工作的一个原因是因为您仅在 :hover 上应用 display:block,它需要应用于没有 :hover 选择器的元素,否则您将获得“移位”方面。使用哪种显示类型无关紧要,您只需确保它们相同,默认情况下<a> 是内联的。

        另一个原因与您的速记边框有关,您需要为透明版本添加边框类型,例如 solid 而不是 none

        您使用的技术完全合法,无需填充黑客或轮廓(不会增加尺寸)。

        http://jsfiddle.net/Madmartigan/kwdDB/

        试试这个:

        #wd-navbar li a {
             border: medium solid transparent;
             display: block;
             margin: 1px;
        }
        
        #wd-navbar li a:hover {
             background-color: #F5DEB3;
             border: medium solid;
        }
        

        【讨论】:

          【解决方案5】:

          border: 10px solid transparent 怎么样?

          【讨论】:

          • 我会接受这个,因为它似乎是最干净的解决方案,尽管@derekerdmann 的答案也很好并且是跨平台的(据说这个解决方案在 IE 6 中不起作用)。 stackoverflow.com/questions/5790615/…
          【解决方案6】:

          设置边框颜色:透明;完成这项工作。

          a {
            border-color : transparent ;
          }
          
          a:hover {
             border-color : black;
          }
          

          【讨论】:

            【解决方案7】:

            使用伪元素::after::before 来划分不可见的边界。

            【讨论】:

              【解决方案8】:

              请注意,透明边框仅在元素上没有任何 box-shadow 时才有用。看看图片:

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 2019-02-13
                • 2021-12-30
                • 2016-04-12
                • 1970-01-01
                • 2017-06-09
                • 1970-01-01
                • 1970-01-01
                • 2012-03-04
                相关资源
                最近更新 更多