Add hovering indicator for ul li bullet point - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover on list

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover on list

Description

Add hovering indicator for ul li bullet point

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">
ul.navibox {<!--from ww w  .j a  va 2  s .c o m-->
   margin:0 0 0 0;
   padding:6px 0 0 21px;
   list-style-type:none;
   font-family:arial,verdana,helvetica,sans-serif;
   font-size:15px;
   color:Chartreuse;
}

ul.navibox li a:link {
   color:yellow;
   text-decoration:none;
   display:list-item;
   list-style-position:inside;
   list-style-image:url('https://www.java2s.com/style/demo/Google-Chrome.png');
}

ul.navibox li a:visited {
   color:blue;
}

ul.navibox li a:hover {
   color:pink;
   list-style-image:url('https://www.java2s.com/style/demo/Google-Chrome.png');
}
</style> 
 </head> 
 <body> 
  <nav> 
   <ul class="navibox"> 
    <li> <a href="#">Lore</a> </li> 
    <li> <a href="#">Lorem</a> </li> 
    <li> <a href="#">Lorem i</a> </li> 
    <li> <a href="#">Lorem ipsu</a> </li> 
   </ul> 
  </nav>  
 </body>
</html>

Related Tutorials