CSS: hover選擇器的使用

joyvw 發(fā)布于2019-08-29 13:54 / 900人閱讀

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

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

定義和用法

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

用法1：
這個表示的是：當(dāng)鼠標(biāo)懸浮在a這個樣式上的時候，a的背景顏色設(shè)置為黃色

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;
        }

總結(jié)一下：

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

實例

用一個按鈕控制一個盒子的運動狀態(tài)，當(dāng)鼠標(biāo)移到按鈕上方時，盒子停止運動，鼠標(biāo)移開時，盒子繼續(xù)運動

body代碼：

    
        stop

css樣式：

實現(xiàn)效果：

云服務(wù)器 GPU云服務(wù)器服務(wù)器管理器的使用 css選擇 css選擇器基礎(chǔ)選擇器css

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112791.html

相關(guān)文章

玩轉(zhuǎn)CSS選擇器（二）之瀏覽器支持，常見Bug，性能優(yōu)化

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

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

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

Prasanta 2019-08-01 18:05 評論0 收藏0
CSS 屬性選擇器的深入挖掘

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

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

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

Magicer 2019-08-29 14:03 評論0 收藏0
Sass快速入門學(xué)習(xí)筆記

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

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