focus特效

Posted on Edited on In Views: Disqus:

 

跟hover特效一樣，focus特效也是不可或缺的偽類。

 

一、來看focus基本範例

<!DOCTYPE html>
<html>
<head>
    <style>
        input:focus {
            background-color: yellow;
        }
    </style>
</head>
<body>

    <p>Click inside the text fields to see a yellow background:</p>

    <form>
        First name: <input type="text" name="firstname"><br>
        Last name: <input type="text" name="lastname">
    </form>

    <p><b>Note:</b> For :focus to work in IE8, a DOCTYPE must be declared.</p>

</body>
</html>

該功能為當滑鼠移到並點選特定欄位時，

此時focus特效就會起動，把該欄位反黃。

 

二、進階範例

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
        input + i {
            color: black;
            transition: all 0.4s ease-in-out;
        }

        input[type=text]:focus + i {
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" name="search"><i class="fa fa-envelope"></i>
    <br>
    <input type="text" name="search"><i class="fa fa-envelope"></i>
</body>
</html>

當利用focus的時，只想影響隔壁元素要如何做?

答案是利用Adjacent Sibling Selector即可做到。