15

ホバーすると大きくなるCSSボタンがいくつかあります。テキストも大きくしましたが、使用されている背景画像をいじらずにテキストを数ピクセル下に移動したいと思います。

ヘルプ？

私のコードは次のようになります。

<div id="nav">
    <a href="index.php">Home</a>
    <a id="headrush">Beer Bongs</a>
    <a id="thabto">Novelty</a>
</div>

#nav a {
    background: url(Images/Button.png);
    height: 28px;
    width: 130px;
    font-family: "Book Antiqua";
    font-size: 12px;
    text-align: center;
    vertical-align: bottom;
    color: #C60;
    text-decoration: none;
    background-position: center;
    margin: auto;
    display: block;
    position: relative;
}

#nav a:hover {
    background: url(Images/Button%20Hover.png);
    height: 34px;
    width: 140px;
    font-family: "Book Antiqua";
    font-size: 16px;
    text-align: center;
    color: #C60;
    text-decoration: none;
    margin: -3px;
    z-index: 2;
}

#nav a:active {
    background: url(Images/Button%20Hover.png);
    height: 34px;
    width: 140px;
    font-family: "Book Antiqua";
    font-size: 14px;
    text-align: center;
    color: #862902;
    text-decoration: none;
    margin: 0 -3px;
    z-index: 2;
}
4

5 に答える 5

19

line-heightCSS プロパティを使用します。

于 2012-06-11T14:51:51.233 に答える
4

リンクには次のスタイルを使用します。

#nav a:link {
background: #ff00ff url(Images/Button.png);
height:28px;
width:130px;
font-family:"Book Antiqua";
font-size:12px;
text-align:center;
vertical-align:bottom;
color:#C60;
text-decoration:none;
background-position:center;
display:block;
position:relative;
}

で、変更したいものだけ:hoverを定義します ( 、など)。:visitedbackgroundfont-size

#nav a:hover {
    background: #f000f0 url(Images/Button%20Hover.png);
}

あなたのコードではリンクのサイズが異なります:
a- height:28px; width:130px;,
a:hover height:34px; width:140px;,
a:visited- height:34px; width:140px;),

そのため、異なるサイズ、位置 (a使用する場合はmargin:auto- 0px) を取得しますが、a:hover余白が変更されたため、リンクの位置も変更されます。

于 2012-06-11T15:03:45.017 に答える
2

テキストを下に移動する場合は、padding-top を使用します。

于 2012-06-11T14:51:37.340 に答える