Hover over a:nth-child(5) and (7) to effect a:nth-child(8) - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover Effect

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover Effect

Description

Hover over a:nth-child(5) and (7) to effect a:nth-child(8)

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
@import url(https://www.java2s.com/style/demo/Firefox.png);
#heroLinks-Wrap {<!-- ww w .  j  av a2s .co m-->
   width:693px;
   height:32px;
   position:absolute;
   margin:21px 0px;
   font-family:'Roboto', sans-serif;
   font-weight:201;
   color:Chartreuse;
   font-size:27.6px;
   letter-spacing:.7200003px;
}

#heroLinks-Wrap a:nth-child(1n+1) {
   color:yellow;
}

#heroLinks-Wrap a:nth-child(1n+1):hover {
   text-decoration:underline;
}

#heroLinks-Wrap a:nth-child(8):hover {
   text-decoration:none;
}

#heroLinks-Wrap a:nth-child(5):hover~a:nth-child(8),
#heroLinks-Wrap a:nth-child(7):hover~a:nth-child(8) {
   text-decoration:underline;
}
</style> 
 </head> 
 <body> 
  <div id="heroLinks-Wrap"> 
   <a>Lorem ipsum dol</a> 
   <span>L</span> 
   <a>Lorem ipsu</a> 
   <span>L</span> 
   <a>Lor</a> 
   <span>L</span> 
   <a>Lor</a> 
   <a>Lorem ips</a> 
  </div> 
  <!-- END heroLinks-Wrap -->  
 </body>
</html>

Related Tutorials