在悬停时使 PNG 徽标后面的背景透明（初学者）答案

【问题标题】：Make background behind PNG logo transparent on hover (beginner)在悬停时使 PNG 徽标后面的背景透明（初学者）
【发布时间】：2013-06-05 22:04:43
【问题描述】：

我正在开发一个网站，并且正在为一件事而苦苦挣扎。基本上，当您将鼠标悬停在主徽标上时，徽标的背景会变成白色，看起来很糟糕。我已经在三种不同的浏览器中尝试过。除了鼠标指针变为链接指示器之外，我不希望悬停时有任何其他视觉变化。如果有帮助，这是一个基于引导程序的 mediawiki 主题。

网站是：www.nebdat.com

我发现该部分称为 p-logo 并尝试了以下方法：

#p-logo:hover { background-color: transparent !important; }

它似乎没有做任何事情。但是，当我尝试时：

#p-logo:hover { opacity: 0; }

标志和背景都是透明的，所以我知道这是对象的正确名称。但是，我希望保留徽标名称。

我希望这是有道理的。我对此很陌生。

希望你能给点建议。

谢谢，

【问题讨论】：

标签： css mediawiki

【解决方案1】：

@media screen
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}

这就是它的原因。

【讨论】：

【解决方案2】：

应该这样做：

#p-logo > a {
    background: transparent;
}

悬停时有背景的不是图像，而是锚标记。

【讨论】：

完美运行！感谢您的帮助。
顺便说一句，你是怎么知道的？我使用的是 Firebug，它应该悬停，而不是 "> a"，除非我只是想念它。

【解决方案3】：

您不必覆盖它，只需将其删除即可。从 load.php 中查找并删除此代码：

img:hover{background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGElEQVQYV2N4DwX/oYBhgARgDJjEAAkAAEC99wFuu0VFAAAAAElFTkSuQmCC) repeat;background:white url(http://www.nebdat.com/wiki/skins/common/images/Checker-16x16.png?2013-05-25T13:38:20Z) repeat!ie}

【讨论】：