html - div 的颜色悬停在背景图像上

标签 html css hover

解释

我正在尝试制作一些按钮。 我在 div 上有一个背景图片,部分图片是透明的。背景图像是一个圆圈。 当用户将鼠标悬停在该 div 上时,它会将背景更改为紫色,通过透明部分显示出来。 div 是 80px x 80px。与背景图像相同。 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;**/
}

Example Page

最佳答案

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

我更改了 fiddle 中的背景位置以进行补偿,但现在悬停颜色渗到底部。

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

border-radius: 78px;
background-position: -2px -1px;
width: 77px;
height: 78px;
line-height: 78px;

关于html - div 的颜色悬停在背景图像上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19707421/

相关文章:

javascript - 如何让 Canvas 元素到达 Canvas 中心

css - :hover on touchscreen/phonegap . ..让它停止?

javascript - 动态ajax/php选择标签

jquery - 使用 jquery 放大时,图像在悬停时在 Google Chrome 中振动

javascript - 如何以 Angular 动态地在 Bootstrap 模型中添加字段

css - div 内的文本区域

html - div 占据页面的整个宽度

html - CSS 悬停事件,如何触发 parent 的影响

javascript - 微软翻译器 AJAX API,下拉更改 languageTo 和 languageFrom?

CSS 为比屏幕宽的元素添加右边距