Bagaimana Saya Boleh Membalikkan Kesan CSS :hover?

Menterbalikkan Kesan :hover Menggunakan CSS

Kelas pseudo :hover membenarkan pembangun menggunakan gaya tertentu pada elemen apabila penunjuk tetikus berlegar di atas mereka. Walau bagaimanapun, selalunya terdapat keperluan untuk mentakrifkan kesan kontras untuk keadaan apabila tetikus meninggalkan elemen.

Adakah terdapat alternatif CSS untuk :hover yang mencetuskan pada cuti tetikus?

Untuk mencapai kesan yang bertentangan dengan :hover, yang mengaktifkan pada tetikus enter, adalah penting untuk mengingati definisi hover: ia memilih elemen apabila tetikus melepasi mereka. Oleh itu, untuk membalikkan tingkah laku ini, mana-mana titik di mana tetikus tidak di atas elemen boleh disasarkan sebaliknya.

Melaksanakan Kesan Songsang

Pertimbangkan kes penggunaan di mana warna item menu bertukar daripada #999 kepada hitam pada tuding. Untuk mencipta kesan songsang pada cuti tetikus, kita boleh mengalihkan peralihan ke pautan itu sendiri, bukannya keadaan tuding:

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

Penyelesaian ini memastikan peralihan warna berlaku daripada hitam kepada #999 apabila tetikus meninggalkan kawasan pautan.

Selain itu, CSS-trick telah menyediakan artikel yang menunjukkan cara untuk menetapkan peralihan yang berbeza untuk tuding hidup dan tuding mati menyatakan:

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

Atas ialah kandungan terperinci Bagaimana Saya Boleh Membalikkan Kesan CSS :hover?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!