悬停元素时的CSS效果

Question

我有这样的 CSS:

#poll_list {
    margin: 0;
}
#poll_list li {
    height: 50px;
    list-style-type: none;
    font-size: 20px;
    border-bottom: 5px solid white;
    background-color: #cfcfcf;
    position: relative;
}
#poll_list a {
    text-decoration: none;
    line-height: 50px; /*need to match #poll_list li for text in middle*/

    display: inline-block;
    *display: block;
    *zoom: 1;

    width: 100%;
    height: 50px;   
}
#poll_list a:link, #poll_list a:visited {
    color: black;
}
#poll_list a:hover {
    color: white;
}
#poll_list li.first_topic_list, #poll_list li:hover  {
    color: #F0F0F0;
    background-color: slateblue;
}
#poll_list li.first_topic_list:after, #poll_list li:hover:after  {
    position: absolute;

    top: 0;
    bottom: 0;
    left: -20px;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 20px solid slateblue;

    content: "";
}

对于这样的 HTML 列表:

<ul id="poll_list">
    <li class='first_topic_list'><a id='first_topic' href='#'>a</a></li>
    <li><a class='topic' href='#'>b</a></li>
    <li><a class='topic' href='#'>c</a></li>
    <li><a class='topic' href='#'>d</a></li>
    <li><a class='topic' href='#'>e</a></li>
    <li><a class='topic' href='#'>f</a></li>
    <li><a class='topic' href='#'>g</a></li>
</ul>

将其视为 live demo in JSFiddle .

当所有其他元素未悬停时，我希望“a”的行为与所有其他元素一样。此效果应添加到上述 CSS 的顶部。

抱歉我的英语不好。在我看来，我有这样的事情:
只有 'a' 指向左侧 -> 用户鼠标输入对所有其他元素的影响将使其指向左侧 -> 'a' 不再指向

类似于 html option 标签的 selected 属性。所选选项被保留，用户可以选择其他选项，然后它会突出显示该选项。如果用户选择回选中的选项，则选中的选项将突出显示，而不会显示其他选项。

Answer 1

这是你想要的效果吗？第一个链接是预先选择的，但是当鼠标悬停在另一个链接上时会失去突出显示？

http://jsfiddle.net/John_C/N6Gcx/

我的解决方案的主要部分是针对每种可能性使用不同的 :hover 选择器。

#poll_list li:hover  {
  color: black;
  background-color: slateblue;
}
#poll_list:hover li.first_topic_list{
  color: #cfcfcf;
  background-color: #cfcfcf;
}
#poll_list li.first_topic_list{
  color: #F0F0F0;
  background-color: slateblue;
}
#poll_list:hover li.first_topic_list:hover{
  color: #F0F0F0;
  background-color: slateblue;
}