css - 帮助边框和鼠标悬停CSS

Question

我试图让旁边看起来像这个数字：

当鼠标悬停在它上面时，它应该如下图所示：

http://dc616.4shared.com/img/C_un4lvk/s7/0.9417452976564042/444.jpg

旁边的代码：

<aside>
    <div>Hardware
        <span> 
            Printer, DVD, CR-ROM, mouse, keyboard, scanner, router, modem, sound card 
        </span>
    </div>
    <div>
        Software
        <span> 
            Adobe Reader, Microsoft Word, Eclipse IDE, Skype, McAfee Antivirus, BitComet, RealPlayer 
        </span>
    </div>       
</aside>

但是我写的东西给了我不同的结果，这是我的代码：

aside {
    float:left;
    margin: 30px 50px 30px 20px;
    background-color:#f0f8ff;
    display:block;
    padding-top:10px;
    padding-bottom:10px;
    border:dotted pink;
    text-align:center;
}

div{
    width:80px;
    padding-top:10px;
    padding-bottom:10px;
}

div:hover{
   color:#fff;
   background-color:darkblue;
   width:300px;
   text-align:left;
   padding-left:6px;
   padding-top:20px;
}

aside div span{
    display:none;     
}   

aside div:hover span{
    display:block;
    padding-left:80px;
    padding-bottom:8px;
    border:none;
}

</style>

谁能帮我修改我的代码？

Answer 1

尝试指定侧面的宽度（您也可以为您的 div 添加一个最小高度，使其变得像您的第一个图像）：

   aside {
       float:left;
        width:80px;
       margin: 30px 50px 30px 20px;
       background-color:#f0f8ff;
       display:block;
       padding-top:10px;
       padding-bottom:10px;
       border:dotted pink;
       text-align:center;
   }
   div {
       width:80px;
       min-height: 60px;
       padding-top:10px;
       padding-bottom:10px;
   }
   div:hover {
       color:#fff;
       background-color:darkblue;
       width:300px;
       text-align:left;
       padding-left:6px;
       padding-top:20px;
   }
   aside div span {
       display:none;
   }
   aside div:hover span {
       display:block;
       padding-left:80px;
       padding-bottom:8px;
       border:none;
   }

示例：http: //jsfiddle.net/NKtRd/4/

Answer 2

只需添加位置：绝对；到你的 div:hover like

   div:hover{

 color:#fff;
 position:absolute;
 background-color:darkblue;
 width:300px;
 text-align:left;
 padding-left:6px;
 padding-top:20px;

 }

http://jsfiddle.net/pHdnw/