0

http://justxp.plutohost.net/gxx/

ボタンをホバーしてみてください。

ホバー/リンクは、ボタンの頭にホバーした場合にのみ機能します。なぜこうなった？

これはコードです：

    <a href="#">
        <div class="button-1">
            <span class="bebas">play</span>
        </div>
    </a>
    <a href="#">
        <div class="button-1">
            <span class="bebas">community</span>
        </div>
    </a>
    <a href="#">
        <div class="button-1">
            <span class="bebas">account help</span>
        </div>
    </a>

CSS

   .button-1 {
   background-image: url("../img/buttonoff.png");
   background-repeat: no-repeat;
width: 302px;
height: 82px;
margin-left: 1.4%;
margin-top: 1%;
float: left;
text-align: center;
line-height: 90px;
-webkit-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        -ms-transition: all 200ms ease-in-out;
        -o-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
}
.button-1:hover {
background-image: url("../img/buttonon.png");
background-repeat: no-repeat;
width: 302px;
height: 82px;
-webkit-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        -ms-transition: all 200ms ease-in-out;
        -o-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
}

私はそれで何も問題がないと思いますか？高さを大きくしようとしましたが、まだうまくいきません。

私はこれについて非常に興味があります！

4

2 に答える 2

1

クラス ニュースに余白を追加する必要があります。

.news {
    position: relative;
    top: 5%;
    margin-top: 65px;
}

編集：

ボーナス！ボタンの背景には、画像の代わりに css3 の背景グラデーションを使用してください。

グラデーション.glrzad.com

これが役に立てば幸いです。干渉を逃した場合は申し訳ありません。

于 2013-01-28T16:58:22.590 に答える
0

このdivはボタンをオーバーレイしています

<div class="news">

あなたができることは次のとおりです。

これを追加するか：

<br clear="all"/> //<---add this just above the div class named "news"

または、div の CSS を調整できますclass news。

.news {
   position: relative;
   top: 24%;
 }
于 2013-01-28T17:03:05.457 に答える