html - Adding a div containing data around a li on mouseover? -


i have normal li element, contains picture. when hover it, should surrounded div example contains descriptions image in li. please check out link http://www.zalando.de/damenschuhe-sandaletten/ , hover shoes. see, adds information around image.

i tried several things results not want. ideas how to in way?

thanks!

something this?

<ul>     <li>         <div class="info">info 1</div>         [image 1]     </li>     <li>         <div class="info">info 2</div>         [image 2]     </li>     <li>         <div class="info">info 3</div>         [image 3]     </li>     <li>         <div class="info">info 4</div>         [image 4]     </li> </ul>  ul{     list-style:none;     text-align:center;     padding: 0 35px; } li{     display:inline-block;     background: #ddd;     height:200px;     width:200px;     margin:10px;     padding:0;     position:relative; } li > .info{     display:none;     position:absolute;     top:0;     left:-40px;     width:35px;     height:100%;     background:#ffa; } li:hover{     background:#ccf;     border:5px solid #afa;     margin:5px; } li:hover > .info{     display:block; } 

demo: http://jsfiddle.net/nhff3/


Comments

Popular posts from this blog

javascript - Count length of each class -

What design pattern is this code in Javascript? -

hadoop - Restrict secondarynamenode to be installed and run on any other node in the cluster -