【CSS-進階之元素：focus偽類模擬點擊事件】

hosition 發布于2019-04-23 14:35 / 1219人閱讀

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

先放上我們最終實現的效果

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

我們想要實現當點擊某個元素時，顯示一個tip浮動框。

html:


    我是按鈕
    我是文字測試君

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

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

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

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


    我是按鈕
    我是文字測試君

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

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

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

通過:focus屬性可以直接實現點擊事件效果


    我是按鈕
    我是文字測試君

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

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

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

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

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

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

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

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

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

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

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

miqt 2019-08-29 14:12 評論0 收藏0
CSS學習筆記之選擇符

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

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

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

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