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。

我想要＆＃39; a＆＃39;当所有其他元素没有悬停时，表现得像所有其他元素一样。此效果应添加到上面的CSS的顶部。

抱歉我的英语不好。在我看来，我有这样的事情：
只有＆＃39; a＆＃39;指向左 - >用户鼠标中心对所有其他元素的影响将使其指向左 - ＆gt;＆＃39; a＆＃39;不再指点了

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

Answer 1

这是你想要的效果吗？第一个链接是预选的，但是当悬停在另一个链接上时会失去其高亮显示？

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

我的解决方案的主要部分是使用不同的：每种可能性的悬停选择器。

#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;
}

Answer 2

您需要从您应用的CSS属性中删除#poll_list li.first_topic_list。

用以下代码替换您的代码：

#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:hover  {
    color: #F0F0F0;
    background-color: slateblue;
}
#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: "";
}

检查这个小提琴： http://jsfiddle.net/CYtK5/2/

悬停元素时的CSS效果

2 个答案: