HTML CSS examples for CSS Widget:Hover Effect
Create hover effect to highlight selected item
<html lang="en"> <head> <title>Lorem ipsum dolor</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> ul {<!--from ww w.j av a2 s. c o m--> padding:0; list-style:none; maring:0; display:flex; } ul:hover li { opacity:0.5; } ul li { width:26%; height:26vw; line-height:26vw; background-color:Chartreuse; text-align:center; transition:opacity .9s; } ul li:hover { opacity:2; } </style> </head> <body translate="no"> <ul> <li>Lorem </li> <li>Lorem </li> <li>Lorem </li> <li>Lorem </li> </ul> </body> </html>