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：悬停目标所有锚标记，当你说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中完成此任务。

你可以运行onload的可能的Javascript：

这将在您的文档中搜索所有锚标记，并为不包含图像的那些锚名称提供“aText”的className。我不建议将其作为长期解决方案，只是快速解决。

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"
  }
 }
}

Answer 2

以下是您的更新代码：

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

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

img {
  width: 100px;
}

这里是fiddle

CSS：如何从img悬停中删除背景？

2 个答案: