如何在选择时更改菜单的背景颜色？ [英] how to change menu background color when selected?

问题描述

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

这里是我的要求：

 该网站是http://mywebsite.com/。 
  

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

我尝试如下，但未获得：

  a：visited {
 background：＃1B3E70; 
} 
  

请向我建议。

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

HTML

 < li class =menu-item> 
< a href =＃>关于< / a> 
< a href =＃>首页< / 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

$ b b

  $（'。menu-item a'）click（function（）{
 $（this）.addClass（'active'）。siblings removeClass（'active'）; 
}）; 
  

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

I started learning CSS these days, currently i was given with one CSS task, i've tried but iam not getting it..

here is my requirement:

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

You will notice the the menu bar has a hover the color is #1B3E70 . That's the color I want to the selected menu bar item to display when the on the corresponding area/page.

I tried as below but not getting:

 a:visited{
    background: #1B3E70;
}

please suggest me..

解决方案

With Reference to your link (classes and 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');
    });

Live Example http://jsfiddle.net/7VBy9/

这篇关于如何在选择时更改菜单的背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！