幫助邊境和鼠標懸停的CSS

當鼠標懸停在它上面，它應該出現這樣的數字：

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>

誰能幫我修改我的密碼？

來源

2013-03-31 FoFa Ok

注意你的第二個鏈接是死的，而不是實際連接的任何圖片。 – Bono

嘗試指定的寬度一邊（你也可以添加一個最小高度，以您的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/

來源

2013-03-31 15:45:33 iguider

只需添加位置：絕對;您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/

來源

2013-03-31 15:55:01 vidhyakrishnan

它與我附的圖不一樣！ –

幫助邊境和鼠標懸停的CSS

回答

相關問題