0

私は脇をこの図のように見せようとしています:

ここに画像の説明を入力

マウスをその上に置くと、次の図のように表示されます。

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>

コードの変更を手伝ってくれる人はいますか?

4

2 に答える 2

0

aside の幅を指定してみてください (最初の画像のようになるように、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/

于 2013-03-31T15:45:33.080 に答える
0

position:absolute; を追加するだけです。あなたの 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/

于 2013-03-31T15:55:01.170 に答える