链接（或可链接的 DIV？）与背景图像 + 突出显示答案

【问题标题】：Link (or a linkable DIV?) with background image + highlighting链接（或可链接的 DIV？）与背景图像 + 突出显示
【发布时间】：2011-10-27 02:49:35
【问题描述】：

我在 Facebook（也包括 Google）上看到了这个，但不知道该怎么做。下面我截取了 Facebook 导航栏的截图，

几个问题，

这似乎不是仅突出显示链接 - 即，不是通过单独修改 <a> 标签来做到这一点 - a:hover 等。整个元素（可能是 <li>）是被突出显示 - 这是否意味着整个 <li> 元素本身就是一个链接？或者他们只是在链接文本前面放了很多空格（例如，&nbsp;）？他们似乎也没有这样做……这是怎么做到的？
如何制作高亮和背景图像？似乎背景颜色会覆盖背景图像......？
如何获得知道您所在位置的链接？这是通过 JavsScript 完成的，当我单击链接时，我会修改其 CSS 以保持突出显示，并从导航栏中的其他链接中删除所有永久突出显示？我可能会弄清楚如何做到这一点，只是想知道这是否是唯一的方法。

感谢一百万回答我的新手问题！

【问题讨论】：

【解决方案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}

在这个例子中我们改变了背景颜色、背景图片和字体粗细当元素在:hover上时。

Q1：如果您在li 中有一个a href，并且您将display:block 添加到a href - a href 将与父li 一样大。哪一个看起来像li 是a href

此外，如果将display:block 添加到a href，它可以作为spans img em's etc.. 元素的容器——创建一个看起来像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）。

【讨论】：

@reedvoid - 在这种情况下，CSS 和 jQuery 在每个浏览器中的工作方式都是一样的 - 这是非常基本的 CSS 和基本的 jQuery。
@reedvoid - 我们可以将:hover 效果添加到几乎任何东西（p、div、ul、li 等），但 IE8 及更低版本会出现:hover 效果问题对于<a href="#"></a>以外的元素
我刚刚在 JSFiddle 中尝试过，但它似乎不起作用 - 当您将鼠标悬停在背景颜色上时会覆盖背景图像：jsfiddle.net/reedvoid/avNvn/51
哇...它刚刚工作，我不知道为什么，代码完全相同。很奇怪。
@reedvoid - 这是因为您在 :hover 上的 img 无法加载。确保 URL 正确。

【解决方案2】：

1) 下面是一个示例，说明如何实现您的目标。

CSS

li:hover {
background-color: lightblue;
}

li a {
 display: block;
 width: 100%;  
}

HTML

<ol>
    <li><a href="#">menu item 1</a></li>
    <li><a href="#">menu item 2</a></li>    
</ol>

2) 他们可能所做的只是为列表项设置一个图像图标，而不是标准编号或项目符号。阅读此内容：http://www.w3schools.com/cssref/pr_list-style-image.asp

【讨论】：