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

1

添加vertical-align:top;到您的链接和图像 div。

jsFiddle 示例

.buttonimgright {
    display: inline-block;
    background: #CC0000 url('insert-right-image.png');
    width: 15px;
    height: 20px;
    vertical-align:top;
}
.buttonimgleft {
    display: inline-block;
    background: #CC0000 url('insert-left-image.png');
    width: 15px;
    height: 20px;
    vertical-align:top;
}
a {
    height: 20px;
    color: #000;
    background: #CC0000;
    font-size: 16px;
    vertical-align:top;
}
于 2013-04-01T14:44:42.277 回答
0

将样式vertical-align: middle;（bottom也可以）添加到.buttonimgright和buttonimgleft。

此外，您应该将样式添加display: inline-block;到a标签，因为您不能在inline元素上设置高度。

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

于 2013-04-01T14:43:53.147 回答