如何在CSS中选择文本而不是图像

Question

简单问题：我有以下标记...

<a href='#'>
  <img src='icon.png'> This is the link
</a>

我想让鼠标悬停时加下划线。

用于仅选择<a>元素中的文本的CSS选择器是什么？如果我不需要的话，我宁愿不把它包装成任何东西。

a:hover {
  text-decoration: none;
}
a:hover <select_text_here> {
  text-decoration: underline;
}

Answer 1

a:hover {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

a img{
   text-decoration: none;
}

应该这样做。这样，a里面的所有img标签都没有任何下划线。

Answer 2

我看到Opera / IE没有强调图像，但FF确实如此。解决此问题的最简单方法是添加span元素：

<a href="..."><img ... /> <span>...</span></a>

然后将text-decoration应用于span元素：

a:hover span {
  text-decoration: underline;
}

据我所知，您无法仅选择文字。

Answer 3

文本必须在其自己的元素中才能在CSS中进行选择。您必须使用span或类似的：

<a href="#"><img src="" /><span class="link-text">Foo</span></a>

显然，您可以使用.link-text来选择它。

Answer 4

由于文本没有您可以选择的任何单独的“句柄”，因此您可以做的最好的是为整个a标记加下划线，其中包括图像。图像本身不会在技术上加下划线，因此您甚至无法“强调”它。

您必须将图片与文字分开，或将文字换成span并仅突出显示该文字。

Answer 5

也许试试这个：

a:hover {
  text-decoration: underline;
}
a:hover IMG {
  text-decoration: none;
}

Answer 6

a:hover {
  text-decoration: underline;
}
a:hover img {
  text-decoration: none;
}

你可以做的另一件事是

a{
    background: url(icon.png); background-repeat: no-repeat; padding-left: 10px
}

或类似，因此您不必在链接中包含图像元素