CSS: hover選擇器的使用

Prasanta 發布于2019-08-01 18:05 / 1487人閱讀

摘要：有些時候需要用到和這兩個鼠標事件，但是寫又比較麻煩，還要添加監聽事件，所以能用解決的東西盡量解決，這樣可以提高性能，下面說一下我對的了解之前在學計算機應用的時候，老師教我們使用了選擇器來完成下拉菜單，之前只知道怎么使用，并不知道為什么要這么

有些時候需要用到mouseover和mouseout這兩個鼠標事件，但是寫js又比較麻煩，還要添加監聽事件，所以能用css解決的東西盡量yongcss解決，這樣可以提高性能，下面說一下我對:hover 的了解:
之前在學計算機應用的時候，老師教我們使用了:hover選擇器來完成下拉菜單，之前只知道怎么使用，并不知道為什么要這么用，現在記下怎么使用吧

定義和用法

定義：
:hover 選擇器用于選擇鼠標指針浮動在上面的元素。
:hover 選擇器適用于所有元素

用法1：
這個表示的是：當鼠標懸浮在a這個樣式上的時候，a的背景顏色設置為黃色

a:hover
    { 
        background-color:yellow;
    }

這個是最普通的用法了，只是通過a改變了style
用法2:
使用a 控制其他塊的樣式：

使用a控制a的子元素 b：

    .a:hover .b {
            background-color:blue;
        }

使用a控制a的兄弟元素 c(同級元素)：

    .a:hover + .c {
            color:red;
        }

使用a控制a的就近元素d：

    .a:hover ~ .d {
            color:pink;
        }

總結一下：

1. 中間什么都不加  控制子元素；
2. ‘+’ 控制同級元素（兄弟元素）；
3. ‘～’ 控制就近元素；

實例

用一個按鈕控制一個盒子的運動狀態，當鼠標移到按鈕上方時，盒子停止運動，鼠標移開時，盒子繼續運動

body代碼：

    
        stop

css樣式：

實現效果：

云服務器 GPU云服務器服務器管理器的使用 css選擇 css選擇器基礎選擇器css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51575.html

玩轉CSS選擇器（二）之瀏覽器支持，常見Bug，性能優化

摘要：本節內容會跟著上一節的內容繼續完善，首先會補充選擇器的瀏覽器支持情況主要是說，比如我們最常用的群組選擇器在時才被支持，并且還支持了很多我們沒有想到的選擇器，如子元素選擇器，屬性選擇器，了解后你會發現還是挺了不起的。前言上一篇系列文章整理了CSS選擇器的基礎使用方法，因為內容較多且細致，寫了很多DEMO，目前將它整理成適合移動端瀏覽器的CSS選擇器的參考手冊，方便學習CSS的人參考使...

y1chuan 2019-08-28 18:16 評論0 收藏0
CSS: hover選擇器的使用

摘要：有些時候需要用到和這兩個鼠標事件，但是寫又比較麻煩，還要添加監聽事件，所以能用解決的東西盡量解決，這樣可以提高性能，下面說一下我對的了解之前在學計算機應用的時候，老師教我們使用了選擇器來完成下拉菜單，之前只知道怎么使用，并不知道為什么要這么有些時候需要用到mouseover和mouseout這兩個鼠標事件，但是寫js又比較麻煩，還要添加監聽事件，所以能用css解決的東西盡量yongc...

joyvw 2019-08-29 13:54 評論0 收藏0
CSS 屬性選擇器的深入挖掘

摘要：如果頁面上的鏈接很多或者對跳轉頁面的協議有要求，使用屬性選擇器配合偽元素對鏈接的協議進行提示也不失為一種好方法。 CSS 屬性選擇器，可以通過已經存在的屬性名或屬性值匹配元素。屬性選擇器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文將會比較全面的介紹屬性選擇器，盡可能的去挖掘這個選擇器在不同場景下的不同用法。簡單的語法介紹 [attr]：該選擇器選擇包含 att...

luoyibu 2019-08-30 11:15 評論0 收藏0
Sass 語法規則

摘要：首先，和使用同一種語法，但是寫法有所不同。如果一個混合器只包含規則，不包含屬性，那么該混合器就可以在文檔的頂部調用，用于全局。首先，sass和scss使用同一種語法，但是寫法有所不同。sass在編寫的時候不適用 { 和 } 來包括，每一句的末尾也不可以用 ; 來結束。而scss則完全可以按照css的寫法編寫，本篇基本使用sass的寫法。 1 變量 1-1 變量聲明在sass中可以使...

Magicer 2019-08-29 14:03 評論0 收藏0
Sass快速入門學習筆記

摘要：在中，你可以像俄羅斯套娃那樣在規則塊中嵌套規則塊。這個過程中，用了兩步，每一步都是像打開俄羅斯套娃那樣把里邊的嵌套規則塊一個個打開。與此類似，會命中元素和類名為的元素。這種選擇器稱為群組選擇器。1. 使用變量; sass讓人們受益的一個重要特性就是它為css引入了變量。你可以把反復使用的css屬性值定義成變量，然后通過變量名來引用它們，而無需重復書寫這一屬性值。或者，對于僅使用過一次的屬...

appetizerio 2019-04-23 13:44 評論0 收藏0