84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
Quelqu'un peut-il me dire comment faire un survol comme celui-ci en CSS ?
Ceci est un exemple de configuration de Windows 10. Mais je veux le reproduire en CSS.
Vous pouvez utiliser plusieurs images d'arrière-plan dégradées pour obtenir des effets en survol.
Voici un exemple. Évidemment, expérimentez différents réglages jusqu’à obtenir le look souhaité.
<style> body { background: black; } div { width: 150px; height: 50px; color: red; } div:hover { background-image: linear-gradient(to right, white, transparent), linear-gradient(white, transparent), linear-gradient(to right, rgba(255, 255, 255, 0.3), 20%, transparent); background-size: 100% 1px, 1px 100%, 100% 100%; background-position: top left, top left, 1px 1px; background-repeat: no-repeat; } </style> <body> <div>Hover here</div> </body>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous pouvez utiliser plusieurs images d'arrière-plan dégradées pour obtenir des effets en survol.
Voici un exemple. Évidemment, expérimentez différents réglages jusqu’à obtenir le look souhaité.
<style> body { background: black; } div { width: 150px; height: 50px; color: red; } div:hover { background-image: linear-gradient(to right, white, transparent), linear-gradient(white, transparent), linear-gradient(to right, rgba(255, 255, 255, 0.3), 20%, transparent); background-size: 100% 1px, 1px 100%, 100% 100%; background-position: top left, top left, 1px 1px; background-repeat: no-repeat; } </style> <body> <div>Hover here</div> </body>