Span 类不允许我在图像之后添加悬停，在 li 中的链接内答案

【问题标题】：Span class will not allow me to add a hover when after an image, inside a link in an liSpan 类不允许我在图像之后添加悬停，在 li 中的链接内
【发布时间】：2013-05-08 23:06:32
【问题描述】：

我试图让我的跨度文本具有悬停效果，但它似乎不允许我这样做。这是 HTML：

<span class="FooterTitles">Dealer Social</span>
<ul id="listitems">
<li class="footerList"><a href="https://twitter.com/" target="_blank"      alt="Follow Us On Twitter"><img  class="SocialImage" src="sm-twitter.png">

推特

这是 CSS：

.FooterTitles {color:#fff;font-size:24px;}
#listitems{font-size:11px; color:#999;font-weight:bold;list-style-type: none!important;padding: 10px 0 0;margin: 0px;}
#listitems li {list-style-type: none!important;}
.footerList a:link, .footerList a:visited { text-decoration:none;font-size:11px;        color:#999;font-weight:bold;list-style-type: none!important;}
.footerList a:hover, .footerList a:active{font-size:11px; color:#fff!important;font-weight:bold;list-style-type: none!important;}
.footerList {margin-bottom: 10px;}
.SocialImage{padding-right:30px;}
.SocialText, .SocialText a:link, .SocialText a:visited {padding:0;font-size:11px; color:#999;font-weight:bold; position:relative; top:-10px;cursor:pointer;}
.SocialText a:hover, .SocialText a:active {padding:0; font-size:11px; color:#fff!important;position:relative!important; top:-10px!important;font-weight:bold!important;list-style-type: none!important;cursor:pointer;}

有没有人遇到过类似的问题，他们注意到为什么这不起作用？

感谢您的帮助

【问题讨论】：

标签： css hover html

【解决方案1】：

Span 绝对可以像使用任何其他元素一样使用 :hover 伪类。我写了一个快速的jsfiddle 来演示这个（虽然我相信你已经知道它是如何工作的）。

关于您的项目，您似乎从未指定.FooterTitles:hover 仅.FooterTitles。在你的 CSS 中的任何地方添加它，你应该会很好。

【讨论】：