Bagaimana untuk Menggunakan Kesan Tuding pada Elemen Pseudo yang Dicetuskan oleh Elemen Lain?-tutorial css-php.cn

Bagaimana untuk Menggunakan Kesan Tuding pada Elemen Pseudo yang Dicetuskan oleh Elemen Lain?

Patricia Arquette

Lepaskan： 2024-11-19 14:11:02

asal

339 orang telah melayarinya

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

Menambahkan Kesan Tuding pada Elemen Pseudo

Soalan:

Bagaimanakah seseorang boleh melaksanakan kesan lekukan pada elemen pseudo, seperti #element:before:hover, dan jadikan hover itu dicetuskan dengan melayang di atas elemen lain, seperti #button:hover #element:sebelum {...}?

Kaedah CSS Sahaja:

Ya, adalah mungkin untuk mencapai ini semata-mata dengan CSS:

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

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

Salin selepas log masuk

Kaedah jQuery:

Jika anda lebih suka jQuery, inilah penyelesaiannya:

<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>

Salin selepas log masuk

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

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Menggunakan Kesan Tuding pada Elemen Pseudo yang Dicetuskan oleh Elemen Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!