zoukankan      html  css  js  c++  java
  • 列表中不限制宽度,hover时,字体font-weight:bold,防止抖动

    项目一个小问题困扰了很久,在一个没有限制宽度的列表容器中,如果给hover时,给字体➕‘font-wieght:bold’容器就会变宽,然后移动的下一个容器,就会出现抖动,这样很是影响用户体验,于是在网上各种搜解决这种缺陷的方法,终于找到这种隐藏伪类的方法,觉得是个不错的技巧,原文一,
    原文二

    li, a {
        display:inline-block;
        text-align:center;
        font: normal 14px Open Sans;
        text-transform: uppercase;
    }
    a:hover {
        font-weight:bold;
    }
    a::after {
        display: block;
        content: attr(title);
        font-weight: bold;
        height: 0;
        overflow: hidden;
        visibility: hidden;
    }
    

    html

    <ul>
        <li><a href="#" title="height">height</a></li>
        <li><a href="#" title="icon">icon</a></li>
        <li><a href="#" title="left">left</a></li>
        <li><a href="#" title="letter-spacing">letter-spacing</a></li>
        <li><a href="#" title="line-height">line-height</a></li>
    </ul>
    
  • 相关阅读:
    Lombok介绍、使用方法和总结
    Vargant centOS7安装
    Nginx
    Docker
    GOPATH
    Golang http
    /^正则表达式$/
    go: missing Git command. See https://golang.org/s/gogetcmd
    Golang 反射
    Golang 常量
  • 原文地址:https://www.cnblogs.com/jkingdom/p/9605812.html
Copyright © 2011-2022 走看看