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>