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

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

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

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

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

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

html:


    我是按鈕
    我是文字測(cè)試君

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

這里我們用CSS來(lái)模擬hover事件：

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

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


    我是按鈕
    我是文字測(cè)試君

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

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

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

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


    我是按鈕
    我是文字測(cè)試君

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/2315.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

clasnake 2019-04-23 13:30 評(píng)論0 收藏0