0

解释

我试着做几个按钮。我在 div 上有一个背景图像，这些图像的一部分是透明的。背景图像是一个圆圈。当用户将鼠标悬停在该 div 上时，它会将背景更改为通过透明部分显示的紫色。div 为 80 像素 x 80 像素。与背景图像相同。div的半径为100px；

问题

当用户将鼠标悬停在 div 上时，会有一小部分紫色显示在背景图像之外。

我该如何阻止这种情况发生？

HTML 代码

<div id='Menu'>
<div onclick="gotoPage('HomePage')" class='MenuItem' id='home'>
    Home
</div>
<div onclick="gotoPage('AboutUsPage')" class='MenuItem' id='team'>
    About Us
    </div>
</div>

CSS 代码

#Menu
{
    width: 80px;
}
.MenuItem
{
    font-family: 'Share Tech', bold, sans-serif;
    background-image: url(../images/button.png);
    color: rgb(51, 0, 102);
    text-align: center;
    vertical-align: center;
    margin-top: 25px;
    border-radius: 999px;
    width: 80px;
    height: 80px;
    line-height: 80px;
}
.MenuItem:hover
{
    background-color: rgba(51, 0, 102, 1);
    color: darkgray;
    cursor: pointer;
    /**position: relative;
    top: -5px;
    left: -5px;
    margin-bottom: -20px;**/
}

示例页面

4

2 回答 2

0

按钮的重叠图像不是完整的 80 x 80；

我更改了小提琴中的背景位置以进行补偿，但现在悬停颜色流到底部。

您需要修复图像本身或更改按钮的整体大小，这在小提琴http://jsfiddle.net/69Jaw/和下面的代码中演示。

border-radius: 78px;
background-position: -2px -1px;
width: 77px;
height: 78px;
line-height: 78px;
于 2013-10-31T13:43:55.267 回答
-2

假设每件事都如你所说，我只建议你添加这个以确保 bg 图像的大小和位置正确：

background-position:center;
background-size:80px 80px;

此外，border-radius应修改为：

border-radius: 50%;

JSFiddle 演示

于 2013-10-31T13:32:25.377 回答