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：像

一样悬停

   div:hover{

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

 }

http://jsfiddle.net/pHdnw/

帮助边境和边境鼠标悬停css

2 个答案: