【问题标题】:CSS stylesheet issue. Responsive Nav bar font color not respondingCSS 样式表问题。响应式导航栏字体颜色没有响应
【发布时间】:2014-08-06 08:39:31
【问题描述】:

我正在开发一种响应式布局,它有两种不同的菜单布局,标准布局和移动布局。我似乎无法在主(第二)导航菜单中的当前页面链接上更改字体颜色。我可以设置当前/活动页面的背景,它适用于两个菜单;但是,当我更改字体/链接颜色时,它只会在移动菜单中更改。我已经搜索过,似乎找不到发生这种情况的原因或解决方案。

这是页面:http://www.newmanlandscaping.com/index2.php

这是样式表:http://www.newmanlandscaping.com/nlstyle.css

感谢收看, 汤姆

#home .home a:link, #home .home a:visited,#home .home a:hover, #home .home a:active,  
#contact .contact a:link, #contact .contact a:visited, #contact .contact a:hover,                           #contact .contact a:active,
#photos .photos a:link, #photos .photos a:visited, #photos .photos a:hover, #photos     .photos a:active, 
#services .services a:link, #services .services a:visited, #services .services a:hover,     #services .services a:active{  <br>


font-weight: bold;
background-color: green; /*This changes the background link color to display the current page. Works in both menus. */
color: white;      /* This changes the link font color of the current page in the menu. This only changes on the mobile menu. */
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

【问题讨论】:

  • 您尝试应用哪种颜色?现在是ffff00
  • 它设置为白色查看移动菜单当前页面链接颜色。
  • 见下文:#home .home a:link, #home .home a:visited,#home .home a:hover, #home .home a:active, #contact .contact a:link , #contact .contact a:visited, #contact .contact a:hover, #contact .contact a:active, #photos .photos a:link,
    background-color: green; /*这会改变背景链接颜色以显示当前页面。适用于两个菜单。 / 颜色:白色; / 这会改变菜单中当前页面的链接字体颜色。这仅在移动菜单上更改。 */

标签: php css menu navigation


【解决方案1】:

使用“!important”关键字,这样它就不会被其他关键字覆盖。

#home .home a:link, #home .home a:visited, #home .home a:hover, #home .home a:active, #home .home .mainheader nav a:link, #home .home .mainheader nav a:visited, #home .home .mainheader nav a:hover, #home .home .mainheader nav a:active, #contact .contact a:link, #contact .contact a:visited, #contact .contact a:hover, #contact .contact a:active, #photos .photos a:link, #photos .photos a:visited, #photos .photos a:hover, #photos .photos a:active, #services .services a:link, #services .services a:visited, #services .services a:hover, #services .services a:active
{
 font-weight: bold;
 background-color: green; /*This changes the background link color to display the current page. Works in both menus. */
 color: white !important;      /* This changes the link font color of the current page in the menu. This only changes on the mobile menu. */
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-04-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-11-20
    • 1970-01-01
    相关资源
    最近更新 更多