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

我在链接悬停上使用了下划线效果，但没有使用文本装饰（它必须与文本具有不同的颜色）

HTML:

如何在鼠标悬停时从img中删除下划线？该行应仅显示在文本链接上

---

这根本不起作用：

为了实现这一点，您必须创建单独的类

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

.aText:悬停{
/*文字装饰：下划线*/
背景图像：线性梯度（180度，rgba（0,0,0,0）80%，rgba（0,0,0,1）20%）；
}
img{
宽度：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"
  }
 }
}

函数addClass（）{
var links=document.getElementsByTagName（'a'）；
对于（变量i=0；iif（links[i].getElementsByTagName（'img'））.length谢谢，解释得很好！我不敢相信CSS不允许选择父项。但是，您的解决方案有效，标记为已回答，但仍希望找到一个解决方案，而无需将类添加到我的所有文本链接中！嘿@Bedo，我编辑了我的问题，为您提供了一个快速修复，将为您添加类名，直到您有时间添加它们为止你自己。塔克斯说“没有！重要”；解决这个问题需要2个小时。。
<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;
}

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