前端性能优化--能用css的地方尽量不要用js

来源：互联网发布：win10家庭版装c语言编辑：程序博客网时间：2024/05/21 17:50

在写这篇文字的时候，本来没有打算归类到前端性能优化的范畴，只是想写一些关于有的地方我们可以利用css代替js实现网页动态的效果，比较常见的有导航栏，提示信息等，很多时候我们会利用js实现，比如鼠标移动到父级li上，我们希望子级显示菜单，我们可能在js给每个父级的li绑定一个hover事件。

0、导航栏

下面我用css的方式实现，这里我们利用了hover的伪类，（我们可能大部分都是用到a标签上的，提示大家不是只有a标签才可以用哦）。我们先将子级的ul定位到页面之外，在鼠标hover上面的时候，left设置auto即可（用display:none和block同样可以），代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>那些你可能会疏忽的css代替js</title>    <style>        *{            margin: 0;            padding: 0;        }        li{            list-style: none;        }        .primary{        }        .primary>li{            position: relative;            display: inline-block;            width: 100px;            background: #89ac10;        }        .secondary{            position: absolute;            left: -9999px;        }        .secondary>li{            width: 100px;            background: #66afe9;        }        ul.primary li:hover .secondary{            left: auto;        }    </style></head><body><ul class="primary">    <li>菜单A        <ul class="secondary">            <li>A-1</li>            <li>A-2</li>            <li>A-3</li>        </ul>    </li>    <li>菜单B        <ul class="secondary">            <li>B-1</li>            <li>B-2</li>            <li>B-3</li>        </ul></li>    <li>菜单C        <ul class="secondary">            <li>C-1</li>            <li>C-2</li>            <li>C-3</li>        </ul></li>    <li>菜单D        <ul class="secondary">            <li>D-1</li>            <li>D-2</li>            <li>D-3</li>        </ul></li></ul></body></html>

1、提示信息

就是实现，在input输入内容的时候，要显示提示信息，普遍的做法就是，添加鼠标点击，移出事件，我这里用纯css实现，大家参考一下

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        div span {            display: none;            color: red;        }        div input:focus + span {            display: inline-block;        }    </style></head><body><div>    <input type="text"/>    <span>请输入电话号码：138-0080-1209。</span></div></body></html>

3 0