2

実際にボタンタグを使用せずにこのボタンを作成しようとしています。ボタン画像を作成し、左、中央、右の 3 つのセクションにスライスしたので、リンクにテキストを追加すると、長さに応じて画像が拡大されます。ホバリング画像も使用していますが、このスタイルをボタンタグに適用しようとすると、オーバー機能が機能しません。ボタンタグにホバー機能がないためかどうかはわかりません。しかし、この 3 ピースの画像をリスト形式で配置すると、「ボタン」のホバーされた画像とホバーされていない画像をうまく表示できますが、すべての Web ブラウザーで適切に表示されるわけではありません。

リスト形式のスタイルは次のとおりです。

<ul class="glossyBtn">
    <li class="newBtn">
        <a style="margin-left: 12px"class="printRemove" href='<%:Url.Action("Close", "Close", new{caseId = Model.CaseId}) %>'><b><b class="bodyBtn">Close</b></b></a>
    </li>
</ul>

ボタンタグはあるがホバーCSSが適用されていない場合のスタイルです。

   <ul class="glossyBtn">
   <li class="newBtn">
      <button class="noStyle" type="submit" value="save"> <a>
      <b><b class="bodyBtn">Save</b></b></a></button>
   </li>
</ul>

CSSは次のとおりです。

.glossyBtn
{
    position: relative;
    padding: 5px 0 0 6px;
    margin: 0 auto 0 auto;
    height: 24px;
    float: left;

    list-style: none;
}
.glossyBtn li
{
    float: left;
}
.glossyBtn li a, .glossyBtn li button, .glossyBtn li input a  {
    float: left;
    color: #046fad;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    padding: 0 0 0 6px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    border-bottom: none;
}

.glossyBtn li a b, .glossyBtn li input a b {
    height: 24px;
    display: block;
    padding: 0 8px 0 8px;
}
.glossyBtn li a b.bodyBtn, .glossyBtn li input a b.bodyBtn
{
    height: 24px;
    display: block;

}
.glossyBtn li.newBtn a, .glossyBtn li.newBtn input a
{
    color: #046fad;
    background: url('images/iconPlace.png') no-repeat 0 0;
}
.glossyBtn li.newBtn a b, .glossyBtn li.newBtn input a b {
    color: #046fad;
    background: url('images/endBtn.png') no-repeat right 0;
}
.glossyBtn li.newBtn a b.bodyBtn, .glossyBtn li.newBtn input a b.bodyBtn
{
    background: url('images/bodyBtn.png') repeat-x;
}
.glossyBtn li a:hover, .glossyBtn li button a:hover {
    background: url('images/iconPlace.png') no-repeat 0 -24px;
}
.glossyBtn li a:hover b, .glossyBtn li button a:hover b {
    background: url('images/endBtn.png') no-repeat right -24px;
}
.glossyBtn li a:hover b.bodyBtn, .glossyBtn li button a:hover b.bodyBtn
{
    background: url('images/bodyBtn.png') repeat-x 0 -24px;
}

私がやろうとしていることに対する提案や代替案をいただければ幸いです。ありがとう！

4

2 に答える 2

3

私があなたの質問を誤解しない限り、「拡張ボタン」を取得するために3つのセクションは実際には必要ありません。幅をそのままにしておくと、これが自動的に取得されます。見てください：http：//jsfiddle.net/HrCR8/3/

この特定のボタンは、ChadMazzollaとボタンを作成するための彼のスタイルのコレクションのおかげです。あなたはここでそれらを見つけることができますhttp://hellohappy.org/css3-buttons/

于 2012-08-13T13:23:31.760 に答える
1

li要素に基づいてホバースタイルを設定してみてください。

li:hover a{
    //link hover styling
}

li:hover button{
    //button hover styling
}
于 2012-08-13T13:22:55.850 に答える