CSS hover

時間 2019-11-06

標籤 css hover 欄目 CSS 简体版

原文原文鏈接

CSS hovercss

hover 鼠標移動到當前標籤上時，如下css屬性才能生效html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 建立類 */
        .pg-header {
            /* 固定頁面位置 */
            position: fixed;
            /* 設置右 */
            right: 0;
            /* 設置左 */
            left: 0;
            /* 設置上 */
            top: 0;
            /* 設置高度 */
            height: 48px;
            /* 設置背景顏色 */
            background-color: #2459a2;
        }

        /* 指定字符間位置 */
        .w {
            width: 980px;
            margin: 0 auto;
        }

        /* 設置樣式字符距離 */
        .pg-header .menu {
            /* 設置爲塊級與行內標籤 */
            display: inline-block;
            /* 設置字符間距離 */
            padding: 0 10px 0 10px;
            /* 設置字符顏色 */
            color: white;
        }

        /* 鼠標放置後觸發 */
        .pg-header .menu:hover {
            /* 修改背景顏 */
            background-color: blue;
        }
    </style>
</head>
<body>
<!--  調用類 -->
<div class="pg-header">
    <!--  調用類，設置邊距 -->
    <div class="w" style="margin-top:16px">
        <!--  調用類 -->
        <a class="logo">LOGO1</a>
        <a class="menu">xxx</a>
        <a class="menu">xxx</a>
    </div>
</div>
</body>
</html>

1. css的僞類hover
2. CSS :hover 選擇器
3. css Hover的巧用
4. CSS 搞事技巧：hover+active
5. css 列表 hover時閃動
6. css 之 hover 大用途
7. 純css hover放大圖片
8. css中hover的使用
9. CSS 媒體查詢(any-hover any-pointer)
10. CSS：鼠標通過hover顯示圖片
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

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