2 
<style type="text/css">
   .button2 {
       font-family: "Georgia Pro", Georgia;
       background: #000;
       color: #fff;
       text-decoration: none;
       padding: 5px 15px;
       border: 3px solid #000;
       font-size: 14px;
   }

   .button2:hover {
       border: 3px solid #000;
       background: #fff;
       color:#000;
   }
</style>

<a href="#link" class="button2" title="ADD TO SHOPPING BAG"><span>ADD TO SHOPPING BAG</span></a>

これは私のコードです。ユーザーがリンク上を移動すると、ホバーボックスが下または上から移動して入るようにしたいですか？私はCSS3トランジションに非常に慣れていないので、全体sを理解していませんwidthかheight？唯一のことは、多かれ少なかれ流動的で、レスポンシブデザインをより適切に処理したいということemですauto。

jsFiddle： http: //jsfiddle.net/Ysr7W/2/

サンプルホバー：

ここに画像の説明を入力してください

4

1 に答える 1

6

CSSはこの効果に適した言語ではないと思いますが、私はあなたのために何かを作成しようとしました。コードは完璧ではありませんが、あなたが要求したことを実行します：http: //jsfiddle.net/Ysr7W/9/

私が使用したHTML構造：

<a href="#" class="button">
    <span class="white">ADD TO SHOPPING BAG</span>
    <span class="black">ADD TO SHOPPING BAG</span>
</a>​
于 2012-12-21T10:43:31.147 に答える