【CSS-進(jìn)階之元素：focus偽類模擬點(diǎn)擊事件】

hosition 發(fā)布于2019-04-23 14:35 / 1382人閱讀

摘要：并且模擬的是事件并不是點(diǎn)擊事件，因為當(dāng)我們鼠標(biāo)按鈕放開后彈框立即消失了。當(dāng)按鈕被點(diǎn)擊時，觸發(fā)了事件。事件往上傳播到父元素。因此觸發(fā)了它的偽類效果。進(jìn)而能控制其下面的子元素屬性。

先放上我們最終實現(xiàn)的效果

注：這里建議插入codepen(臨時使用圖片代替)

我們想要實現(xiàn)當(dāng)點(diǎn)擊某個元素時，顯示一個tip浮動框。

html:


    我是按鈕
    我是文字測試君

通常我們會采用JS的方法給觸發(fā)事件元素監(jiān)聽click事件監(jiān)聽，然后手動顯示隱藏。

這里我們用CSS來模擬hover事件：

:active + 兄弟選擇器(加號+)

首先想到的是使用偽類的方法:active，他和相鄰兄弟選擇器(加好+)一起使用。


    我是按鈕
    我是文字測試君

.popup{
    display:none;
}
.click-ele:active + div.popup{
    display: block;
}

這種方法更適用于事件觸發(fā)和相應(yīng)事件元素屬于兄弟元素的場景。并且模擬的是hover事件并不是點(diǎn)擊事件，因為當(dāng)我們鼠標(biāo)按鈕放開后tip彈框立即消失了。

方法二 :focus偽類和事件冒泡

通過:focus屬性可以直接實現(xiàn)點(diǎn)擊事件效果


    我是按鈕
    我是文字測試君

.wrapper:focus .popup{
    display: block;
}
.popup{
    display:none;
}

這里利用的是事件冒泡原理。當(dāng)按鈕被點(diǎn)擊時，觸發(fā)了focus事件。事件往上傳播到父元素.wrapper。因此觸發(fā)了它的:focus偽類效果。進(jìn)而能控制其下面的子元素屬性。

云服務(wù)器 GPU云服務(wù)器模擬單擊事件 css元素 DOM元素事件 java怎么模擬事件

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/2315.html

相關(guān)文章

jQuery入門筆記之（三）事件詳解

摘要：可以傳遞三個參數(shù)表示一個或多個事件類型，比如。表示綁定到指定元素的處理函數(shù)。我們稱它為簡寫事件。必須在中，并且使用作為事件觸發(fā)元素，不然無效。和表示鼠標(biāo)移入和移出的時候觸發(fā)。按下返回按下返回和分別表示光標(biāo)激活和丟失，事件觸發(fā)時機(jī)是當(dāng)前元素。轉(zhuǎn)自個人博客在JavaScript 有一個非常重要的功能，就是事件驅(qū)動。如果你的網(wǎng)頁需要與用戶進(jìn)行交互的話，就不可能不用到事件。它在頁面完全加...

GitCafe 2019-08-19 17:17 評論0 收藏0
CSS效果篇--純CSS+HTML實現(xiàn)checkbox的思路與實例

摘要：出于美化和統(tǒng)一視覺效果的需求，的自定義就被提出來了。這里對實現(xiàn)方法做個總結(jié)。實現(xiàn)思路純實現(xiàn)的主要手段是利用標(biāo)簽的模擬功能。個人建議用的和偽元素和是一個東西。向擁有鍵盤輸入焦點(diǎn)的元素添加樣式。向已被訪問的鏈接添加樣式。 checkbox應(yīng)該是一個比較常用的html功能了，不過瀏覽器自帶的checkbox往往樣式不怎么好看，而且不同瀏覽器效果也不一樣。出于美化和統(tǒng)一視覺效果的需求，chec...

qingshanli1988 2019-08-01 18:22 評論0 收藏0
CSS效果篇--純CSS+HTML實現(xiàn)checkbox的思路與實例

摘要：出于美化和統(tǒng)一視覺效果的需求，的自定義就被提出來了。這里對實現(xiàn)方法做個總結(jié)。實現(xiàn)思路純實現(xiàn)的主要手段是利用標(biāo)簽的模擬功能。個人建議用的和偽元素和是一個東西。向擁有鍵盤輸入焦點(diǎn)的元素添加樣式。向已被訪問的鏈接添加樣式。 checkbox應(yīng)該是一個比較常用的html功能了，不過瀏覽器自帶的checkbox往往樣式不怎么好看，而且不同瀏覽器效果也不一樣。出于美化和統(tǒng)一視覺效果的需求，chec...

miqt 2019-08-29 14:12 評論0 收藏0
CSS學(xué)習(xí)筆記之選擇符

摘要：子選擇符的子元素同胞選擇符和在后面就行必須緊跟非子選擇符所有是元素孫子的元素選擇器屬性選擇器標(biāo)簽名屬性屬性值偽類選擇器動態(tài)事件，狀態(tài)改變被訪問過的鏈接偽類鏈接偽類。換句話說，如果選擇符更明確特指度更高，無論它在哪里，都會勝出。類型，類和ID選擇器帶有空格的字體名稱要用引起來對選擇器分組可使同一規(guī)則適用于多個選擇器，例子如下 th,td { padding:0 10...

20171112 2019-08-28 18:02 評論0 收藏0
神奇的選擇器 :focus-within

摘要：的偽類選擇器和偽元素選擇器，讓有了更為強(qiáng)大的功能。劃重點(diǎn)，它或它的后代獲得焦點(diǎn)。另外，劃重點(diǎn)，這個偽類是仍處于實驗室的方案。最后感謝耐心讀完。CSS 的偽類選擇器和偽元素選擇器，讓 CSS 有了更為強(qiáng)大的功能。偽類大家聽的多了，偽元素可能聽到的不是那么頻繁，其實 CSS 對這兩個是有區(qū)分的。有個錯誤有必要每次講到偽類都提一下，有時你會發(fā)現(xiàn)偽類元素使用了兩個冒號 (::) 而不是一個冒...

clasnake 2019-04-23 13:30 評論0 收藏0