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

Question

我在Facebook（也是谷歌）看到这一点，但无法弄清楚如何做到这一点。我拍了下面Facebook导航栏的截图，

几个问题，

1. 似乎这只是突出显示链接 - 即，不通过单独修改<a>标记 - a:hover等来完成此操作。整个元素（可能是{ {1}}）正在突出显示 - 这是否意味着整个<li>元素本身就是一个链接？或者他们可能只是在链接文本前放置了很多空格（例如<li>）？他们似乎也不这样做......这是怎么做到的？

2. 如何制作高光和背景图像？好像背景颜色会覆盖背景图像......？

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

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

Answer 1

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

E.G。

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，变得像parrent li一样大。可以看作li <{1}}的{​​{1}}

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

Q2：当您为同一元素指定背景图片和背景颜色时 - 背景图片将始终位于TOP。

请注意：

a href

与：

相同

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

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

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

Answer 2

1）这里有一个关于如何实现所需目标的例子。

http://jsfiddle.net/UKna2/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