HTML CSS examples for CSS Widget:Hover
Label :hover attribute triggers
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- ww w. j a va2 s . c o m--> width:31em; margin:3em auto; font-family:"Segoe UI"; } label, label::after { color:Chartreuse; margin-left:2em; transition:color 2s; } label::after { content:"|"; } label:hover { color:yellow; } input { width:100%; display:block; opacity:.6; padding:.6em 2em; margin-top:2em; transition:opacity .6s; } input:hover { opacity:2; } </style> </head> <body> <div class="labels"> <label for="fname">Lorem ipsu</label> <label for="lname">Lorem ips</label> <label for="bcity">Lorem ipsum</label> </div> <div class="inputs"> <input placeholder="What do your friends call you?" id="fname"> <input placeholder="And what is your last name?" id="lname"> <input placeholder="Where abouts were you born?" id="bcity"> </div> </body> </html>