【转】能用css的地方尽可能不要用js

时间 2019-11-08

标签 css 地方尽可能不要栏目 CSS 繁體版

原文原文链接

原文：http://blog.csdn.net/wzgdjm/article/details/50824236javascript

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

0、导航栏

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

<!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>

一、提示信息

就是实现，在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>