#css #navigation
#css #навигация
Вопрос:
Некоторое время пытался разобраться с этим и решил посмотреть, не может ли кто-нибудь из вас пролить свет на эту тему.
У меня есть меню / навигация с заголовком страницы, выделенным жирным шрифтом вверху, и более легким описанием под ним (см. Изображение ниже).
При наведении курсора я хочу, чтобы пункты меню отображались следующим образом:
Я хочу, чтобы обе строки текста меняли цвет независимо от того, наведен курсор на верхнюю «Обо мне» или нижнюю «Кто я?».
На данный момент я могу заставить любую строку менять цвет только при наведении курсора мыши.
Кто-нибудь, пожалуйста, может помочь мне решить эту проблему?
Ответ №1:
Вы должны быть в состоянии сделать это, если обернете обе части в ссылку, например:
<a href="#">ABOUT ME<span>Who Am I?</span></a>
Затем вы можете использовать стиль, подобный:
a:hover {color:blue;}
a:hover span {color:red;}
Вы, конечно, использовали бы более упрощенный стиль с использованием классов.. но вы должны понять суть моего простого примера (если я правильно понял ваш вопрос).)
Редактировать: рабочий пример
Комментарии:
1. Спасибо за ваш быстрый ответ. Я только что опробовал это, и это работает, но с одной небольшой проблемой… При наведении курсора мыши на текст меньшего размера крупный текст над ним становится черным, а текст меньшего размера — синим. Однако, если навести курсор на текст большего размера, текст меньшего размера тоже становится черным … имеет ли это смысл? Если нет, я загружу несколько скриншотов.
2. Предполагается, что это работает именно так. Оба текста действуют как простой элемент — якорь, который действует одновременно как оболочка и ссылка. Вы не можете отключить их с помощью чистого css-решения. Если вы хотите, чтобы большая часть активировала оба изменения цвета, но наведение курсора на меньшую часть ничего не активирует, тогда вам нужно использовать javascript или создать меню из изображений. (По крайней мере, я не знаю чисто кроссбраузерного css-рабочего решения для этого).
3. Похоже, что использование изображений — единственный путь вперед? Вот над чем я пока работаю — это далеко от завершения. Может быть, это прояснит мою проблему? [ lukekendalldesign.co.uk/developmentzone/newwebsite /]
4. Нет, вы можете просто использовать мое решение (которое работает с этим так, как я привык). Я добавил ссылку на демонстрацию к своему ответу.
5. Если вы хотите различное поведение в каждой строке текста, вам придется использовать более сложное решение с javascript. Но я не вижу никаких причин, зачем вам это делать. Такого рода навигации выполняются (или, по крайней мере, были, когда я занимался веб-дизайном) так, как я показал.
Ответ №2:
событие «наведения» запускается, как только вы фактически «наводите курсор» на выбранный объект. Если изображение, которое вы публикуете, представляет собой только один объект, я думаю, вам придется разделить его на 2 части, а затем соединить их вместе, таким образом, вы сможете установить триггер наведения на оба объекта, и вы получите желаемый результат.
Комментарии:
1. Загруженное мной изображение фактически представляет собой две строки текста, которые выглядят следующим образом
<li><a href="#">WELCOME<br/><span>It all starts here.</span></a></li>после выполнения приведенных выше советов.