0

基本的にこれはメニューで、ホバーすると、リンクの両側に別の画像が表示されます。ここまでたどり着きましたが、リンクの白いスペースを取り除くことができないようです。ホバー時にリンクの上に空白があってはなりません。私が欠けているものを理解できないようです!?

<li><a href="#" class="button">Button 1</a></li>
<li><a href="#" class="button">Button 2</a></li>
<li><a href="#" class="button">Button 3</a></li>    

$(document).ready(function(){
    $(".button").hover(function() {
        $(this).before('<div class="buttonimgleft"></div>');
        $(this).after('<div class="buttonimgright"></div>');
                }, function() {
        $(".buttonimgleft, .buttonimgright").remove();
    });
});


body { 
    margin: 0;
}

li { 
    list-style: none;
    display: inline-block;
    margin-right: 15px;
}
.buttonimgright { 
    display: inline-block;
    background: #CC0000 url('insert-right-image.png');
    width: 15px;
    height: 20px;
}

.buttonimgleft { 
    display: inline-block; 
    background: #CC0000 url('insert-left-image.png');
    width: 15px;
    height: 20px;
} 

a { 
    height: 20px;
    color: #000;
    background: #CC0000;
    font-size: 16px;
}

これがフィドルです：http://jsfiddle.net/vEXG3/1/

4

2 に答える 2

0

と の両方にスタイルを追加します (これも機能しますvertical-align: middle;) 。bottom.buttonimgrightbuttonimgleft

さらに、要素に高さを設定できないため、スタイルdisplay: inline-block;をタグに追加する必要があります。ainline

http://jsfiddle.net/mblase75/vEXG3/5/

于 2013-04-01T14:43:53.147 に答える