0

主にボタンと 1 つのアンカーを含むリストがあります。

編集：各ボタン/アンカーには、ホバーしていない状態で1pxの境界線があります

いずれかにカーソル<li>を合わせると、2px の丸みを帯びた角が<a>または<button>

<li>がホバー時に「ジャンプ」しないようにするために<li>、ボタン/アンカーよりも幅と高さを4px大きく設定しました

display:block錨を下ろしました。

<a>要素が と異なって見えるのはなぜ<button>ですか?

フィドル

アンカーの配置を修正するために次を追加しても：

a.btn:before {
    content: '';
    margin-top: 14px;
}

(フィドル)

...私はまだアンカーにホバー 'ジャンプ効果を取得します.

どうすればこれを修正できますか?

マークアップ

<ul class="choices">
    <li class="source">
        <a href="#" class="btn">Link</a>
    </li>
    <li class="source">
        <button type="button" class="btn">Btn1</button>
    </li>
    <li class="source">
        <button type="button" class="btn">Btn2</button>
    </li>
    <li class="source">
        <button type="button" class="btn">Btn3</button>
    </li>
</ul>

CSS

*
{
    margin:0;padding:0;
}
ul
{
    list-style-type: none;
    width: 600px;
    margin: 0 auto;
    background: yellow;
}
a, button /*reset default styles */
{
    margin:0;padding:0;border:0;
    background:transparent;
    outline: none;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    -webkit-appearance:none;
    line-height: normal;
    font-family: inherit;
    font-size: 100%;
}
.choices{
    text-align: justify;
}
.choices:after{
    content: '';
    width: 100%;
    display: inline-block;
}
.source{
    width: 122px;
    height: 112px;
    display:inline-block;
}   
.btn{
    border-radius: 5px;
    background: #faf9fa;
    border: 1px solid #dcdcdc;
    width: 118px; /* to take into account the 2px border on hover - */
    height: 108px; /* I make the button a little smaller than the li */
    font-size: 14px;
    color: #111; 
    float:left; 
    display:block;
    text-align: center; /*needed for the <a> tag  */
}
.btn:hover {
    border: 2px solid #952262;
    background: #f4f4f4;
}
.btn:before {
    content: '';
    display: block;
    background: url(http://placehold.it/50x50) no-repeat;
    margin: 0 auto 10px;
    width: 50px;
    height: 50px;
}
4

3 に答える 3

0

この更新フィドルを確認してください

.btn実際には、a.btnホバー状態にいくつかの境界線を追加しました

于 2013-08-13T12:30:46.170 に答える
0

コードが間違っている理由を詳しく説明することなく、それを修正する最も簡単な方法は、透明な境界線を .btn クラスに追加することです

.btn{
    border-radius: 5px;
    background: #faf9fa;
    border: 1px solid #dcdcdc;
    width: 118px; /* to take into account the 2px border on hover - */
    height: 108px; /* I make the button a little smaller than the li */
    font-size: 14px;
    color: #111; 
    float:left; 
    display:block;
    text-align: center; /*needed for the <a> tag  */
    border:2px solid transparent;
}

JSFIDDLE

于 2013-08-13T12:27:53.497 に答える