CSS: 如何从图像悬停中删除背景？

Question

我对 link 未使用文本装饰创建的悬停有下划线效果（它必须与文本具有不同的颜色）

HTML:

<a href="#">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Custer_Bvt_MG_Geo_A_1865_LC-BH831-365-crop.jpg" />
</a>

CSS:

a:hover {
    background-image: linear-gradient(180deg, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 20%);
}

a:hover img {
    background-image: none !important;
}

img {
  width: 100px;
}

如何在鼠标悬停时删除 img 中的下划线？该行应仅出现在文本 links.

中

Fiddle

这根本不起作用：HTML: remove a:hover for images?

Answer 1

您将必须创建单独的类才能完成此操作。

a:hover 定位所有锚标签，当你说 a:hover img 时，你定位的是锚标签内的图像，它无法控制锚标签悬停效果（背景图像）。

为了删除悬停在图像上的锚点的背景图像，您需要定位父对象，这在目前 css 中是不可能的。

我建议执行以下操作：

<a href="#">
   <img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Custer_Bvt_MG_Geo_A_1865_LC-BH831-365-crop.jpg" />
</a>
<a class="aText" href="#">
   TESTING
</a>

.aText:hover {
    /*text-decoration:underline;*/
    background-image: linear-gradient(180deg, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 20%);
}

img {
  width: 100px;
}

您也可以在 Javascript 中完成此操作。

可能 Javascript 你可以运行加载：

这将在您的文档中搜索所有锚标记，并为不包含图像的标记提供 "aText" 的类名。我不建议将此作为长期解决方案，只是一个快速解决方案。

function addClass(){
 var links = document.getElementsByTagName('a');
 for (var i = 0; i < links.length; i++){
  if( links[i].getElementsByTagName('img').length <= 0){
    links[i].className = "aText"
  }
 }
}

CSS: 如何从图像悬停中删除背景？

CSS: How to remove background from img hover?

html

css

background-image

hover

linear-gradients