Question

当我将鼠标悬停在链接的图像上时，我会看到图像下方悬停的背景颜色。怎么避免这个？

是否有任何解决方案不涉及将特殊类应用于a元素（如a.nobackground:hover）？

CSS：

a:hover, a:focus {
    background-color: rgb(240,39,96);
    cursor: pointer;    
}

HTML：

<a href="#" title=""><img src="with_transparency.png" alt=""/></a>

修改将img background设置为none不起作用

a img {
    background: none !important;
}

如果图像下方没有非纯色（或图形）（在这种情况下为.png），

将img背景设置为任何其他颜色都可以完成工作

a img {
    background: #000 !important;
}

Answer 1

设置图像的背景颜色是否符合要求？

a img {
    background: none;
}

根据您的样式表，您可能需要在“无”前面!important爆炸以覆盖其他条件。

编辑：第二个想法，您可能想要明确设置颜色值，而不是简单地说“无”。

另一个编辑：是的，如果透明PNG背后的颜色或背景不是纯色，你会遇到一些问题。另一种选择是：

<a href="#" class="transparent_png"></a>

CSS：

.transparent_png {
    background-image: url('with_transparency.png');
    background-color: transparent;
    display: inline-block;
    width: ??px;
    height: ??px;
}

所以在这里，你实际上并没有使用图像标记，但可以覆盖通常应用于：hover和a：active的background-color属性。这有用吗？

Answer 2

如果我正确理解了这个问题......您需要在该特定链接上应用特殊类，或者如果与其他链接不同，则按其位置调用链接。例如：

div div div a {}

正如Matt所说，您可能需要使用！important，因为您的规则包含页面中的所有链接。我推荐一个不同的类，从语义的角度来看，这是更好的。

a：将img悬停在背景中

2 个答案: