Question

这些天我开始学习CSS，目前我有一个CSS任务，我已经尝试但是我没有得到它..

这是我的要求：

The site is http://mywebsite.com/ .

您会注意到菜单栏的悬停颜色为#1B3E70。这是我想要选择的菜单栏项目在相应区域/页面上显示的颜色。

我尝试如下但未获得：

 a:visited{
    background: #1B3E70;
}

请建议我..

Answer 1

参考您的链接（类和ID）：

HTML

<li class="menu-item">
    <a href="#">About</a>
    <a href="#">Home</a>
</li>

CSS

 .menu-item{
        list-style:none;
    } 
    .menu-item a{
        padding:20px;
        padding-bottom:10px;
        border:1px solid #1B3E70;
        color:#1B3E70;
        text-decoration:none;
    }.menu-item a:hover{
            background-color:#1B3E70;
        color:white;
    }
    .menu-item .active{
         background-color:#1B3E70;
         color:white;

    }

Jquery

    $('.menu-item a').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
    });

实例http://jsfiddle.net/7VBy9/

Answer 2

a访问时的背景颜色似乎只适用于FF，Chrome和Safari。如果法线a具有背景颜色，无论是显式定义还是通过继承（直接父实际上必须具有背景颜色才能为真）。

显然，必须始终定义背景颜色并不理想，因为网站可能有背景图像。

Answer 3

如果您在单击时突出显示当前菜单文本，则可以尝试使用此代码：

$(function() {
     $('#nav li').click(function() {
         $(this).find('a').addClass('active');
          $(this).siblings('li').find('a').removeClass('active');
     })
});

并在您的css中添加.active：

.active {
    background: #1B3E70;
}

Answer 4

尝试，

jQuery(function(){
 jQuery('#nav li a').click(function() {
 jQuery('#nav li a').removeClass('active');
 jQuery(this).addClass('active');
 });
});

还将以下css添加到您的文件

.links a.active {
    color: #FFFFFF;
    background-color: #1B3E70;
}

Answer 5

尝试使用它来改变颜色。

a:visited {color: #1B3E70;}

选择后如何更改菜单背景颜色？

5 个答案: