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

Question

我在不使用文本装饰的情况下创建的链接悬停有下划线效果(与文本相比，它必须具有不同的颜色)

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 中删除下划线？该行应仅出现在文本链接上。

Fiddle

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

Answer 1

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

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

为了在图像悬停时删除 anchor 的背景图像，您需要定位当前在 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 中完成此操作。

您可以运行 onload 的可能 Javascript:

这将在您的文档中搜索所有 anchor 标记，并为不包含图像的标记提供类名“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"
  }
 }
}