Mitä ovat hover-efektit?

2024 Kirjoittaja: Lynn Donovan | [email protected]. Viimeksi muokattu: 2023-12-15 23:46

Hover Effect : Pop ja taustaanimaatio. Hover-tehoste tuotetta varten. Kuva ponnahtaa ylös ja alas, ja sitten tausta liukuu ulos ja animoituu.

Tiedä myös, kuinka saat tekstin näkyviin, kun kuva leijuu?

Animoidun tekstin näyttäminen kuvan päällä Hoverissa käyttämällä vain CSS3:a

1. Luo HTML¶ Lisää kuva käyttämällä

   tunniste ja teksti. Ensinnäkin sinun tulee lisätä kuvasi käyttämällä

   tag.

2. Luo CSS¶ Aseta:hover-valitsin. Hoverin vaikutus asetetaan käyttämällä:hover-pseudoluokkaa, joka valitsee ja tyylittelee elementin.

Voidaan myös kysyä, miten hover-toimintoa käytetään? :hover-valitsinta käytetään elementtien valitsemiseen, kun siirrät hiiren niiden päälle.

1. Vinkki::hover-valitsinta voidaan käyttää kaikissa elementeissä, ei vain linkeissä.
2. Vinkki: Käytä:link-valitsinta muotoilemaan vierailemattomille sivuille johtavia linkkejä,:visited-valitsinta vierailtujen sivujen linkkien tyyliin ja:active-valitsinta aktiivisen linkin muotoiluun.

Tästä syystä, kuinka siirrät kuvan CSS:ssä?

Vastaus: Käytä CSS-taustakuvaominaisuutta

1. Vaihda kuva Hoverissa CSS:ssä
2. .card {
3. leveys: 130px;
4. korkeus: 195px;
5. tausta: url("images/card-back.jpg") no-repeat;
6. näyttö: inline-block;
7. }

Kuinka pääsen eroon leijunnasta?

Hover-tehosteen poistamiseksi käytöstä minulla on kaksi ehdotusta:

1. jos JavaScript laukaisee hiiritehosteen, käytä vain $. unbind('hover');
2. Jos hover-tyylisi laukaisee luokka, käytä vain $. removeClass('hoverCssClass');