Question

我尝试这样做：用户点击链接，然后点击的链接变为黄色并保持黄色，直到我点击点击链接旁边的链接。所以他们需要切换。（不是：主动）我应该用onclick完成这个。我个人想用css来做。

<div id="Space">
    <ul>
        <li role="presentation" class="sort">
            <a href="/?sort=score&page=1" style="text-decoration:none;">hot</a>
        </li>
        <li role="presentation" class="date">
            <a href="/?sort=date&page=1" style="text-decoration:none;">update</a>
        </li>
    </ul>
</div>

目前在css中，我有

#Space li {
    display: inline;
    margin-left: 10px;
    padding-bottom: 11px;
}

#Space li:hover {
  border-bottom: 5px solid #6495ED;
}

并没有为js。 Javascript和<script></script>的html一样对吗？任何帮助将不胜感激，谢谢:)

Answer 1

您可以将:active与:hover一起使用：

#Space li:active,
#Space li:hover {
  border-bottom: 5px solid #6495ED;
}

现在，这种情况一直持续到你点击另一个链接。但是有更好的方法使用<input type="radio" />持续存在。

#Space li {
  display: inline;
  margin-left: 10px;
  padding-bottom: 11px;
}

#Space li:focus,
#Space li:hover {
  border-bottom: 5px solid #6495ED;
  outline: 0;
}

<div id="Space">
  <ul>
    <li role="presentation" class="sort" tabindex="1">
      <a href="#" style="text-decoration:none;">hot</a>
    </li>
    <li role="presentation" class="date" tabindex="1">
      <a href="#" style="text-decoration:none;">update</a>
    </li>
  </ul>
</div>

我在上面的示例中使用了:focus，因为:hover与<li>相关联，而不是<a>。

JavaScript版本可以像添加和删除.active类一样简单。

Answer 2

在悬停中使用颜色：selecor

＆＃13;

#Space li {
  display: inline;
  margin-left: 10px;
  padding-bottom: 11px;
}
#Space li:hover {
  border-bottom: 5px solid #6495ED;
  color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Space">
  <ul>
    <li role="presentation" class="sort">
      <a href="/?sort=score&page=1" style="text-decoration:none;">hot</a>
    </li>
    <li role="presentation" class="date">
      <a href="/?sort=date&page=1" style="text-decoration:none;">update</a>
    </li>
  </ul>
</div>

＆＃13;

使用css和javascript onclick，链接颜色更改，当他们被点击并被激活，直到我点击其他链接

2 个答案: