Ссылки в списках - получение последовательного эффекта: hover - PullRequest
1 голос
/ 12 марта 2012

Когда я создаю список ссылок и присваиваю им ссылки в состоянии: hover, я хочу, чтобы вся ссылка, включая точку маркера, выделялась при наведении курсора. Но что, потому что мой список имеет определенную ширину, которая шире, чем As, LI выбирают: hover и меняют цвет перед тем, как делают. Это выглядит грязно! Как это:

http://jsfiddle.net/NgWLR/

Видишь, о чем я? Это как A & LI - отдельные объекты, которые запускаются в разное время.

Если я попытаюсь добавить display: block в стиль A, все, что я получу, это странные проблемы с отображением в Firefox и небольшое улучшение в других браузерах, но это, безусловно, не решит проблему.

Я могу изменить list-style-type на none и добавить объект: before bullet на мои LI, например:

http://jsfiddle.net/tScnS/2/

И это, кажется, работает нормально, по крайней мере, в Safari и Firefox, но в качестве решения оно выглядит грубым / грязным / маловероятным, чтобы поддерживаться во всех браузерах.

Кто-нибудь знает «пуленепробиваемый» (ха-ха!) Способ заставить это работать, или я должен просто пойти дальше и реализовать его как 2-й JSfiddle-list-style-none, bullet: before? Спасибо!

Ответы [ 2 ]

3 голосов
/ 12 марта 2012

Вы можете использовать li:hover a вместо a:hover для стилизации ссылки, например: http://jsfiddle.net/NgWLR/2/

PS: Пожалуйста, удалите удалить несвязанный код при отображении примеров.

0 голосов
/ 12 марта 2012

Как я понимаю, удалите display:block из вашего <a> тега.Как это:

Проверьте это http://jsfiddle.net/NgWLR/1/

...