Question

假设我有以下选择器：

a       { padding: 1em; }
a:hover { backgrond-color: #FF0000; }

假设我有以下HTML代码：

<a href="http://stackoverflow.com"><img src="so.jpg"></a>

当鼠标悬停时<img>获得红色背景颜色会发生什么。

任何想法如何解决？

谢谢，Boda Cydo！

Answer 1

要么更具体地了解您的a:hover选择器

.something a:hover { background-color: #ff000; }

或创建另一个选择器，阻止在您不希望它的实例中更改背景

a.no-bg-change:hover { background: none !important; }

<a href="http://stackoverflow.com" class="no-bg-change"><img src="so.jpg"></a>

Answer 2

由于你的图像是不透明的，大部分时间只是删除边框和填充就足以隐藏红色了。

a img { border: none; padding: 0; margin: -1em; }

负边距否定a填充

Answer 3

我很好奇你是如何通过jpg看到红色背景的。不过，这应该可以解决问题。

a:hover img { 
  background:transparent; 
}

Answer 4

jQuery('a').hover(function(){
    jQuery(this).has('img').css('background', 'none');
});

Answer 5

好的，你不会相信我，但我上面遇到了同样的问题，我解决了如下问题：

我有这样的事情：

<a href="#"> {
{1}} {
{1}}

在我的CSS中，我有：

<img src"path/to/image.gif">

而且，相信我，我只需要将'img'标记放在与'a'标记相同的行中，就像这样：

</a>

这就是全部!!!

Answer 6

这很奇怪，你说要用背景制作a，但只有在有图像的情况下，才会这样做。如果链接有文字和图像怎么办？让它更简单，只要准确说出你想要的。我假设您可以这样做：

<a href="..."><img src="so.jpg"></a>
<a href="..."><span class="text">some text</span></a>
<a href="..."><span class="text">some text</span> and <img src="so.jpg"></a>

a .text { padding: 1em; }
a:hover .text {background-color:#ff0}

如何避免a：将鼠标悬停在CSS中的img上？

6 个答案: