Home >Web Front-end >CSS Tutorial >How to Apply Hover Effects to Pseudo Elements Using CSS or jQuery?

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

Linda Hamilton
Linda HamiltonOriginal
2024-11-13 02:21:021027browse

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

Hover Effects for Pseudo Elements

The Query

We have the following HTML setup:

<div>

And the corresponding 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;
}

The question is, how can we apply a hover effect to the pseudo element using CSS only or jQuery? Additionally, can the pseudo element react to a hover effect on another element?

The Answer

CSS Only:

To change the pseudo-element based on the hover of the parent using CSS, we can do the following:

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

The above is the detailed content of How to Apply Hover Effects to Pseudo Elements Using CSS or jQuery?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn