【轉】能用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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。