如何將懸停效果套用於由另一個元素觸發的偽元素？-css教學-PHP中文網

如何將懸停效果套用於由另一個元素觸發的偽元素？

Patricia Arquette

發布： 2024-11-19 14:11:02

原創

338 人瀏覽過

How to Apply Hover Effects to Pseudo Elements Triggered by Another Element?

為偽元素添加懸停效果

問題：

如何在偽元素上實現懸停效果，例如#element:before:hover，並透過將滑鼠懸停在另一個元素上來觸發懸停，例如#button:hover #element:before {...}?

CSS 唯一方法：

是的，可以純粹使用CSS 來實現此目的：

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

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

登入後複製

jQuery 方法：

如果您更喜歡jQuery，這裡有一個解決方案:

<div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override">#button {
    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;}

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

<div>

登入後複製

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

登入後複製

以上是如何將懸停效果套用於由另一個元素觸發的偽元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！