如何使用 CSS 或 jQuery 將懸停效果套用到偽元素？-css教學-PHP中文網

如何使用 CSS 或 jQuery 將懸停效果套用到偽元素？

Linda Hamilton

發布： 2024-11-13 02:21:02

原創

1036 人瀏覽過

How to Apply Hover Effects to Pseudo Elements Using CSS or jQuery?

偽元素的懸停效果

查詢

我們有以下HTML 設定：

<div>

登入後複製

以及我們有以下HTML 設定：

#button {
    color: #fff;
    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;
}

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

登入後複製

以及對應的CSS :

問題是，我們如何只使用CSS 或jQuery 將懸停效果應用於偽元素？此外，偽元素可以對另一個元素上的懸停效果做出反應嗎？

答案

僅限CSS：

#button:hover:before {
    background-color: red;
}

登入後複製

更改偽元素基於使用CSS 的父級懸停，我們可以執行以下操作：

$("#button").hover(function() {
    $(this).find(":before").css("background-color", "red");
}, function() {
    $(this).find(":before").css("background-color", "blue");
});

登入後複製

JQuery:

以上是如何使用 CSS 或 jQuery 將懸停效果套用到偽元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！