获取:悬停字体颜色适用于完整的li框

时间:2014-11-21 16:07:49

标签: html css

当整个a:hover框悬停而不仅仅是#fff链接时,如何将li字体颜色设为href?目前,li悬停颜色在悬停时#fff#666之间闪烁,因为完整的li框不是链接。

如果重要的话,这个html是由Google RSS小部件生成的,Google的样式表位于http://www.google.com/uds/api/feeds/1.0/482f2817cdf8982edf2e5669f9e3a627/default+en.css,但不会出现(对我来说至少)那里有任何冲突。



#my-feed {width:180px;}
#rss-title {font-size:12px; color:#fff; text-align:center; padding:3px; background-color: #cc6600;}
#rss-title a {color:#fff;}

#rss-feed li {
list-style: inside none none;
font-size:12px;
padding:5px 5px 5px 20px;
line-height:14px;
text-indent: -10px;
}

#rss-feed li a {color:#666;}
#rss-feed li a:hover {color:#fff;}
#rss-feed li:hover {color:#fff;background-color:#cc6600;}
#my-feed ul li:before { content: "\00BB \0020";}

<div id="my-feed">
<div id="rss-title">
<a href="http://example.com">My Title</a>
</div>

<ul id="rss-feed">
<li><a href="http://example.com/first">My First Link</a></li>

<li><a href="http://example.com/second">My Second Link</a></li>

<li><a href="http://example.com/third">My Third Link</a></li>

<li><a href="http://example.com/fourth">My Fourth Link</a></li>
</ul>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

而不是#rss-feed li a:hover {color:#fff;},请使用#rss-feed li:hover a {color:#fff;}

&#13;
&#13;
#my-feed {width:180px;}
#rss-title {font-size:12px; color:#fff; text-align:center; padding:3px; background-color: #cc6600;}
#rss-title a {color:#fff;}

#rss-feed li {
list-style: inside none none;
font-size:12px;
padding:5px 5px 5px 20px;
line-height:14px;
text-indent: -10px;
}

#rss-feed li a {color:#666;}
#rss-feed li:hover a {color:#fff;}
#rss-feed li:hover {color:#fff;background-color:#cc6600;}
#my-feed ul li:before { content: "\00BB \0020";}
&#13;
<div id="my-feed">
<div id="rss-title">
<a href="http://example.com">My Title</a>
</div>

<ul id="rss-feed">
<li><a href="http://example.com/first">My First Link</a></li>

<li><a href="http://example.com/second">My Second Link</a></li>

<li><a href="http://example.com/third">My Third Link</a></li>

<li><a href="http://example.com/fourth">My Fourth Link</a></li>
</ul>
</div>
&#13;
&#13;
&#13;