Активная ссылка

28/11/2012, by Ivan

Добрый день. Подскажите как указать стиль для активной ссылки меню. С помощью псевдокласса :active не получается. Вернее указываю а стиль не меняется. Мне надо чтобы активная ссылка подсвечивалась.

Ставлю вот такие стили.. но ничего не происходит:

#block-menu-menu-header-menu li a:hover,
#block-menu-menu-header-menu li a:active{
    margin-top: 5px;
    padding-top:5px;
    padding-left: 15px;
    padding-right: 15px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    text-transform: uppercase;
    font-size: 22px;
    text-decoration: underline;
    /*font-weight: bold;*/
    font-family: Tahoma;
    background: #cc0000;
    /*background: url(../images/menu-bg.png) left top repeat-x;*/
    height:30px;
    display: block;
    border-left: 2px solid rgba(0, 0, 0, 0.5);
    border-top: 2px solid rgba(0, 0, 0, 0.5);

Drupal version 7.x

1 answer

votes: 673

Answer

Вам не нужно повторять весь css для :hover, достаточно только одного цвета вот так:

#block-menu-menu-header-menu li a{
    margin-top: 5px;
    padding-top:5px;
    padding-left: 15px;
    padding-right: 15px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    text-transform: uppercase;
    font-size: 22px;
    text-decoration: underline;
    /*font-weight: bold;*/
    font-family: Tahoma;
    background: #cc0000;
    /*background: url(../images/menu-bg.png) left top repeat-x;*/
    height:30px;
    display: block;
    border-left: 2px solid rgba(0, 0, 0, 0.5);
    border-top: 2px solid rgba(0, 0, 0, 0.5);
}

#block-menu-menu-header-menu li a:hover,
#block-menu-menu-header-menu li a:active{
  color: #ff0000;
}

У меня ссылки без активности просто имеют другие стили.. И все равно не получается с помощью :актив задать стиль для активной ссылки...

Extra Block Types (EBT) - New Layout Builder experience❗

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Активная ссылка