CSS : Displaying all li item of a list with hover -
i have ul list (with 3 li items) first item displayed.
my code simple , following :
ul {    list-style-type: none;    border: solid #000000 1px;    margin: 0px 0px 0px 0px;    padding: 0px 0px 0px 0px;    float: left;  }    /*hidding li item :*/  ul li {    display: none;  }    /*but display 1st li item :*/  ul li.visible {    display: block;  }  <ul>    <li class="visible">item 1</li>    <li>item 2</li>    <li>item 3</li>  </ul>  i want display li items when mouse cursor on 1st item.
have idea?
you can use :hover pseudo-class:
ul:hover > li {   display: list-item; }   ul {    list-style-type: none;    border: 1px solid;    margin: 0;    padding: 0;    float: left;  }    /* hide list items */  ul > li {    display: none;  }    /* display .visible ones, ,     list items when list hovered */  ul > li.visible, ul:hover > li {    display: list-item;  }  <ul>    <li class="visible">item 1</li>    <li>item 2</li>    <li>item 3</li>  </ul>  
Comments
Post a Comment