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

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

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>

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

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!