- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 Facebook(还有 Google)上看到了这个,但不知道该怎么做。我在下面截取了 Facebook 导航栏的屏幕截图,
几个问题,
这似乎并不是仅突出显示链接 - 即,不是通过修改 <a>
来实现此目的单独标记 - a:hover
等。整个元素(可能是 <li>
)被突出显示 - 这是否意味着整个 <li>
元素本身是一个链接?或者他们可能只是在链接文本前面放置了很多空格(例如
)?他们似乎也没有这样做……这是怎么做到的?
如何制作突出显示和背景图片?似乎背景颜色覆盖了背景图像......?
您如何获得链接以了解您的位置?这是通过 JavsScript 完成的,当我点击一个链接时,我修改它的 CSS 以保持突出显示,并从导航栏中的其他链接中删除所有永久突出显示?我可能会想出如何做到这一点,只是想知道这是否是唯一的方法。
非常感谢您回答我的新手问题!
最佳答案
您可以为 <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)。
关于javascript - 链接(或可链接的 DIV?)与背景图片 + 突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7062621/
有没有一种方法可以“标记”对象的属性,使它们在反射中“突出”? 例如: class A { int aa, b; string s1, s2; public int AA
我是一名优秀的程序员,十分优秀!