работа с активными и парящими ссылками в CSS?

Question

У меня есть этот li список, но я хочу знать, как сделать так, чтобы ссылка текущей страницы имела белый фон (li:active)

CSS:

#layout-three-liquid2 #section-navigation ul
{
    margin: 0;
    padding: 0;
}

#layout-three-liquid2 #section-navigation ul li
{
    margin: 0 0 0em;
    padding: 0;
    list-style-type: none;
}
#layout-three-liquid2 #section-navigation ul li:hover{

    background-color:white;



}
#layout-three-liquid2 #section-navigation ul li a:active{

    background-color:white;



}

HTML:

<ul>
   <li><a active="current" href="#page1">Home</a></li>
   <li><a href="#page3">Replies</a></li>
</ul>

Но это не работает, как я могу решить эту проблему?

Answer 1

Ваш код li:active недействителен / правильный.Вам нужно указать класс и ссылку в вашем CSS следующим образом:

#section-navigation ul li a.current {
  background-color:white;
}

Answer 2

Вы злоупотребляете псевдоклассами CSS. :active и :hover являются специальными значениями, которые используются, когда ссылка нажата (имеет фокус) и когда пользователь перемещает указатель мыши над ней.

Вместо этого следует использовать CSS-классы:
CSS:

#layout-three-liquid2 #section-navigation ul li a.current{

    background-color:white;
}

HTML:

<ul>
   <li><a class="current" href="#page1">Home</a></li>
   <li><a href="#page3">Replies</a></li>
</ul>

Answer 3

Вы не можете сделать <a active="current">

, поскольку active не является допустимым атрибутом элемента <a>.

попробуйте использовать class=current.

тогда в вашем css вы можете нацелить элемент с помощью

#layout-three-liquid2 #section-navigation ul li a.current {
    ...
}

Answer 4

Обратите внимание, что: active не означает страницу, на которой вы находитесь в данный момент, это просто означает, что ссылка нажата.(Это также может работать в наборах кадров)

Вам нужно выполнить некоторые сценарии на стороне сервера, чтобы установить для класса link_active или что-то в этом роде.