我试图让我的跨度文本具有悬停效果，但它似乎不允许我这样做。这是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;}
有没有人有类似的问题，他们注意到为什么这不起作用？
谢谢你的帮助