Здравствуйте! Столкнулся с нерешимой пока для себя проблемой.
Необходимо с помощью CSS сделать так, чтобы кнопка, при нажатии на нее, становилась определенного вида. Кнопки сделаны на CSS, a:hover(изменение стиля при наведении) прописано и работает. не работает только a:active(насколько я понимаю именно он отвечает за выделение нажатой кнопки/ссылки).
Довольно много времени на это потратил, но так ничего и не получил, стиль отказывается применяться. Кэш чистил.
Изначально было вот так:
/* sgmenu */
#sgmenu ul.menu:after { clear: both;content: "";display: block; }
#sgmenu ul.menu { _zoom: 1 }
#sgmenu ul li { float: left;}
#sgmenu ul li a { display: block;white-space: nowrap }
#sgmenu ul li ul { position: absolute;visibility: hidden;}
#sgmenu ul li ul li { float: none;display: inline }
#sgmenu ul li ul li a { width: auto; }
/* sgmenu skin */
#sgmenu { margin: 0;padding: 6px 0 0 0;}
#sgmenu ul.menu li a,#sgmenu ul.menu li a:link, #sgmenu ul.menu li a:visited { text-align:center;padding:0 20px;line-height:34px;}
#sgmenu ul.menu ul li a { text-align:center;padding:0 20px;line-height:34px;background: #000;color: #fff;}
#sgmenu ul.menu ul li a:hover { color: #3385AB }
#sgmenu ul.menu li ul li a:hover { color: #3385AB }
После внесенных изменений стало:
/* sgmenu */
#sgmenu ul.menu:after { clear: both;content: "";display: block; }
#sgmenu ul.menu { _zoom: 1 }
#sgmenu ul li { float: left;}
#sgmenu ul li a { display: block;white-space: nowrap;border:1px solid #000;margin:5px;padding:5px;background-color:#0099ff;color:#000;border-radius: 5px; }
#sgmenu ul li a:hover{background-color:#000;color:#0099ff;}
#sgmenu ul li a:active{background-color:#000;color:#0099ff;}
#sgmenu ul li ul { position: absolute;visibility: hidden;}
#sgmenu ul li ul li { float: none;display: inline }
#sgmenu ul li ul li a { width: auto; }
/* sgmenu skin */
#sgmenu { margin: 0;padding: 6px 0 0 0;}
#sgmenu ul.menu li a,#sgmenu ul.menu li a:link, #sgmenu ul.menu li a:visited { text-align:center;padding:0 20px;line-height:34px;}
#sgmenu ul.menu ul li a { text-align:center;padding:0 20px;line-height:34px;background: #000;color: #fff;}
#sgmenu ul.menu ul li a:hover { color: #3385AB }
#sgmenu ul.menu li ul li a:hover { color: #3385AB }
Причем для #sgmenu приписывал a:active отдельно. Пробовал происывать для a:active и вот так:
{border:1px solid #000;margin:5px;padding:5px;background-color:#0099ff;color:#000;border-radius: 5px; }
Тут еще дело может быть в том, что стиль ссылок всего шаблона определяется в начале такими строками:
a:link, a:visited { color:#777;text-decoration:none;}
a:hover, a:active, a:focus { color:#3385AB; }
и
.current > a > span {
color:#3385AB;
}
Но трогать я их вроде как не могу, так как стиль всех остальных ссылок меня устраивает, мне нужно только для кнопок меню сделать по другому.
Текст в нажатой кнопке отображается именно этим #3385AB цветом. А фон кнопки остается таким же как и у остальных.
Распространенное решение - прописать для каждого пункта меню класс и ему задать стиль мне не подходит, ведь у меня не статичные страницы. Или если я не прав, подскажите, где это прописать, потому как вроде бы решение рабочее.
Спасибо.
21.02.2022, 10:56:18