Как один элемент влияет на другой? - PullRequest
0 голосов
/ 11 декабря 2011

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

Я использую jquery для эффекта наведения изображения ...

и код ссылки на страницуэто просто CSS CSS наведите код.Я хотел бы, чтобы эти два были как-то связаны друг с другом.

Мне также было интересно, может ли значок остаться включенным после нажатия на него (чтобы показать, на какой странице вы находитесь) ...

ТАКЖЕ ...

У меня естьпроблема в том, что когда веб-сайт свернут в маленькое окно ... при горизонтальной прокрутке ... обертка обрезается, и все, что вы видите, это пробел!Я много играл с этим, и это было бесполезно!Я оставил поплавок, но потом не смог его отцентрировать!

Если бы кто-нибудь мог помочь с этими двумя проблемами, это было бы очень признательно!

Ответы [ 2 ]

1 голос
/ 11 декабря 2011

Этого не так уж сложно достичь.Вместо использования a:hover используйте li:hover a, который будет работать при наведении курсора на любую часть <li>, будь то ссылка или изображение.

Предварительный просмотр: http://jsfiddle.net/Wexcode/FZjzG/

Как видите, я фактически удалил ваш тег изображения и поместил его в качестве фонового изображения внутри вашего тега <a>.Этот метод намного лучше, чем использование изображений и jQuery.

Если вам нравится использовать этот метод, есть лучшие способы сделать это.Читайте о CSS Sprites , если вы заинтересованы в получении дополнительной информации.


Редактировать:
Чтобы добавить свое текущее состояние, у вас есть два способа сделать это.Самый простой способ - добавить класс current к элементу навигации, который является "текущей" страницей.

См .: http://jsfiddle.net/Wexcode/FZjzG/1/


Пожалуйста, опубликуйте вашу другую проблемув другой вопрос ... вы должны попытаться сохранить один вопрос к каждому сообщению.

1 голос
/ 11 декабря 2011

Использование javascript для обмена изображениями довольно старая проблема. Вероятно, вам следует объединить img и a в один элемент и использовать css hover selector , чтобы поменять местами фоновое изображение (, например, ).

[Редактировать] : Вот пример использования css-спрайтов. Если вы собираетесь использовать спрайты, вам, вероятно, следует объединить все эти навигационные изображения в одно изображение для сохранения http запросы.

...