HTML CSS examples for CSS Widget:Hover Effect
Hover element to effect sibling element
<html> <head> <meta name="viewport" content="width=device-width"> <style> nav {<!--from w w w .j ava 2 s . c om--> width:701px; background:green; height:81px; float:left; } nav ul { margin:0; padding:0; list-style:none; width:501px; display:inline-flex; } .link { width:151px; line-height:81px; order:2; } .search { background:red; width:51px; order:3; } .search>form>input, .search>form>button { display:none; } .search:hover { width:501px } .search:hover>form>input, .search:hover>form>button { display:inline-block; } </style> </head> <body> <nav> <span>Lorem ips</span> <ul> <li class="link search"> <form> <label>Lorem </label> <input type="text" placeholder="Search here..."> <button type="submit">Lorem </button> </form> </li> <li class="link">Lorem </li> <li class="link">Lorem </li> <li class="link">Lorem </li> </ul> </nav> </body> </html>