Bagaimana untuk Menggunakan Kesan Hover pada Elemen Pseudo Menggunakan CSS atau jQuery?

Kesan Tuding untuk Elemen Pseudo

Pertanyaan

Kami mempunyai persediaan HTML berikut:

<div>

Dan yang sepadan CSS:

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

Persoalannya, bagaimana kita boleh menggunakan kesan hover pada elemen pseudo menggunakan CSS sahaja atau jQuery? Selain itu, bolehkah elemen pseudo bertindak balas kepada kesan lekukan pada elemen lain?

Jawapannya

CSS Sahaja:

Untuk menukar elemen pseudo berdasarkan hover induk menggunakan CSS, kita boleh melakukan berikut:

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

JQuery:

$("#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 Hover pada Elemen Pseudo Menggunakan CSS atau jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!