javascript - 链接(或可链接的 DIV？)与背景图片 + 突出显示

Question

我在 Facebook(还有 Google)上看到了这个，但不知道该怎么做。我在下面截取了 Facebook 导航栏的屏幕截图，

几个问题，

1. 这似乎并不是仅突出显示链接 - 即，不是通过修改 <a> 来实现此目的单独标记 - a:hover等。整个元素(可能是 <li>)被突出显示 - 这是否意味着整个 <li>元素本身是一个链接？或者他们可能只是在链接文本前面放置了很多空格(例如   )？他们似乎也没有这样做……这是怎么做到的？

2. 如何制作突出显示和背景图片？似乎背景颜色覆盖了背景图像......？

3. 您如何获得链接以了解您的位置？这是通过 JavsScript 完成的，当我点击一个链接时，我修改它的 CSS 以保持突出显示，并从导航栏中的其他链接中删除所有永久突出显示？我可能会想出如何做到这一点，只是想知道这是否是唯一的方法。

非常感谢您回答我的新手问题!

Answer 1

您可以为 <a href="#">LINK</a> 指定不同的 CSS悬停时的元素 - 它会产生您所描述的效果。 <强> LIVE EXAMPLE

例如

a { background: #fff img1.png no-reapet left top; font-weight: normal}
a:hover { background: #000 img2.png no-reapet left top; font-weight: bold}

在此示例中，当元素处于悬停状态时，我们更改了背景颜色、背景图像和字体粗细。

Q1:如果您有一个 a href在li里面然后你添加 display:block到 a href - a href会变得和 parent 一样大li .哪个看起来像li是一个 a href

此外，如果您添加 display:block到 a href它可以作为 spans img em's etc.. 的容器elements - 创建一个看起来像 div 的大链接。 例如 here你有一个链接 a href其中包含 desc + img。

Q2:当您同时指定同一元素的背景图片和背景颜色时，背景图片将始终位于顶部。

请注意:

a { background-color: #fff; background-image: url(img1.png); background-repeat: no-repeat; background-position: top left}

等同于:

a { background: #fff url(img1.png) no-repeat top left}

Q3:您可以通过 JS 向点击的元素添加一个类以保持高亮 - 但除非您将此值保存在数据库中，否则在您重新加载页面时它将丢失。

第二个选项是您可以使用 javascript/jQuery 将链接的 URL 与当前 URL 匹配并标记匹配的元素( see this example - jQuery)。