html - 以 SO 处理收件箱链接的方式突出显示网页的一部分

Question

我想为跳转到格式类似于 <a href="sectiongoto">Link</a> 的链接的网页部分设置淡入/淡出突出显示颜色。 ，其中 sectiongoto 标识名称/ID 元素。

这与单击 Stack Overflow 收件箱链接表示您有新消息的方式相同。当您导航/跳转到相关帖子时，帖子的背景会以橙色调淡入然后淡出。

如何在我当前工作的网站上实现这种效果？我使用 Firebug 查看了 SO 页面的源代码，但没有看到任何链接。

Answer 1

您可能正在寻找 :target 伪类

我还没有看过 SO 脚本，但我相当确定淡入淡出是 JavaScript 的事情。它可以通过 CSS 过渡来完成，但这通常用于诸如悬停/焦点的颜色淡入和淡出之类的事情。

http://www.w3.org/TR/selectors/#target-pseudo

http://caniuse.com/#search=target

假设您有这样的示例标记

<ul>
  <li><a href="#target1">Go To 1</a></li>
  <li><a href="#target2">Go To 2</a></li>
</ul>
<div id="target1"><!--Your HTML Here --></div>
<div id="target2"><!--Your HTML Here --></div>

然后你想要这样的 CSS

div:target { background-color:orange; }

因此，当您的用户单击列表中的链接时，您的 url 将采用哈希码 #target1 或 #target2，并且页面中适用的目标现在具有橙色背景色。