CSS Trick open on hover

by Ben Clayton

HTML

<label for="chxbox" class="chx">Checkbox</label>
<input id="chxbox" class="star" type="checkbox" title="bookmark page">
<div  class="list1">Hello<br/>There<br/>Fred</div>
    

<input class="usrpatha" type="text" />
<input class="bookmark" type="checkbox" />
<div class="bookmark-list">Hello<br/>There<br/>Fred</div>

CSS

.star {
    visibility:hidden;
    font-size:30px;
    cursor:pointer;
}
.star:before {
   content: "\2606";
   position: absolute;
   visibility:visible;
}
.star:checked:before {
   content: "\2605";
   position: absolute;
}
/*------------------------*/
.list1    {
    margin-top:20px;
    width:50%;
    height:auto;
    max-height:0px;
    border:2px solid red;
    overflow:hidden;
    
    -moz-transition: max-height 0.5s linear;
    -ms-transition: max-height 0.5s linear;
    -o-transition: max-height 0.5s linear;
    -webkit-transition: max-height 0.5s linear;
    transition: max-height 0.5s linear;

}
.star:hover ~ .list1    {
    max-height:200px;
}
.list1:hover    {
    max-height:200px;
}

.star:checked ~ .list1    {
    background-color:#FFEEEE;
    max-height:200px;
}
/*-------------------------*/
.usrpatha {float:left;}
.bookmark-list    {
    width:50%;
    height:auto;
    max-height:0px;
    overflow:hidden;
    opacity:0;
    border:1px solid gray;

    
    -moz-transition: max-height 0.5s linear;
    -ms-transition: max-height 0.5s linear;
    -o-transition: max-height 0.5s linear;
    -webkit-transition: max-height 0.5s linear;
    transition: max-height 0.5s linear;

    -moz-transition: opacity 0.25s linear;
    -ms-transition: opacity 0.25s linear;
    -o-transition: opacity 0.25s linear;
    -webkit-transition: opacity 0.25s linear;
    transition: opacity 0.25s linear;

}
.usrpatha:hover ~ .bookmark-list    {
    opacity:1;
    max-height:2000px;
}
.bookmark-list:hover    {
    opacity:1;
    max-height:2000px;
}