文章/答案/技术大牛

发布

社区首页 >问答首页 >帮助边框和鼠标悬停css

问帮助边框和鼠标悬停css
EN

Stack Overflow用户

提问于 2013-03-31 23:38:34

回答 2查看 167关注 0票数 0

我试着让边框看起来像这样：

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

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

aside的代码：

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

有人能帮我修改代码吗？

css

回答 2

Stack Overflow用户

发布于 2013-03-31 23:45:33

尝试指定侧边的宽度(您也可以在div中添加一个min-height，这样它就会像您的第一张图像一样)：

   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/

票数 0

Stack Overflow用户

发布于 2013-03-31 23:55:01

只需将position:absolute；添加到div:hover中即可

   div:hover{

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

 }

http://jsfiddle.net/pHdnw/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15731122

复制

相似问题

问帮助边框和鼠标悬停css
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问帮助边框和鼠标悬停cssEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问帮助边框和鼠标悬停css
EN