Question

当整个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，但不会出现（对我来说至少）那里有任何冲突。

＆＃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 a:hover {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;

Answer 1

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

＆＃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;

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

1 个答案: