CSS, меню: активный не работает - PullRequest
Новая
       10

CSS, меню: активный не работает

0 голосов
/ 15 ноября 2011

У меня есть простое меню: 

<ul id="menu2">
    <li> <a href="index.php?id=home">Home</a></li>
    <li> <a href="index.php?id=about">About us</a></li>
    <li> <a href="index.php?id=contacts">Contacts</a></li>
</ul>

И в css файле у меня есть: 

#menu2 {
    background: black;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 220px;
}
#menu2 li {
    margin: 0;
    padding: 0;
}
#menu2 a {
    background: black;
    border-bottom: 1px solid #393939;
    color: #ccc;
    display: block;
    margin: 0;
    padding: 9px 16px;
    text-decoration: none;
}

#menu2 a:hover {
    background: black url("../images/select.png") left center no-repeat;
    color: #fff;
    padding: 9px 16px;
}

#menu2 a:active {
    background: black url("../images/select.png") left center no-repeat;
    color: #fff;
    padding: 9px 16px;
}

Все работает хорошо, за исключением #menu2 a:active, который вообще не работает, в то время как #menu2 a:hover (с теми же правилами) работает хорошо. В чем проблема? Я что-то пропустил?

Ответы [ 3 ]

3 голосов
/ 15 ноября 2011

Работает как положено.Я раскрасил активное состояние красным.
Попробуйте нажать на элемент en и удерживать кнопку нажатой.Фон будет красным.

Вы не увидите изменений, потому что ваши CSS для hover и active идентичны!

Пример
http://jsfiddle.net/dqH3F/1/

Образец содержит 

#menu2 a:active {
    background: red url("../images/select.png") left center no-repeat;
    color: #fff;
    padding: 9px 16px;
}
2 голосов
/ 15 ноября 2011

Можете ли вы предоставить более подробную информацию о том, что именно не работает, и / или демо. Глядя на код, кажется, все в порядке.

Состояние: active относится к нажатию ссылки, поэтому, если вы нажимаете и удерживаете кнопку мыши на своем элементе меню, оно должно работать должным образом, поскольку при наведении указатель активен и имеет те же свойства.

Ссылка с: active не останется такой, когда вы на этой странице тоже ссылаетесь, она возвращается к обычной ссылке.

0 голосов
/ 15 ноября 2011

Ваш фон для: hover и: active в приведенном выше коде точно такой же.

Вы пытаетесь установить фоновое положение x и y на активном?

Без фонового изображения и других цветов (для тестирования) ваш код работает нормально: см. Здесь http://jsfiddle.net/stursby/9Pccb/

...