Как при наведении на один элемент hover менять стили другого элемента css: css — Как при наведении на один элемент менять стили другого элемента? — Независимое театральное объединение "Зрительские симпатии"

Содержание

Как при наведении на один элемент hover менять стили другого элемента css

Как повлиять на другие элементы при наведении div

Я думаю, что это очень простой вопрос, но я не уверен, как это можно сделать.

то, что я хочу сделать, это, когда некий div завис, это повлияет на свойства другого div .

например,этот простой пример при наведении курсора мыши #cube изменения background-color но то, что я хочу, это когда я парю над #container , есть.

6 ответов

если куб находится непосредственно внутри контейнера:

если куб находится рядом с (после закрытия контейнера тега) контейнер:

если куб находится где-то внутри контейнера:

если куб является братом контейнера:

в этом конкретном примере вы можете использовать:

это работает только с cube ребенок container . Для более сложных сценариев, вам нужно использовать JavaScript.

использование селектора sibling является общим решением для укладки других элементов при наведении курсора на заданный,но он работает только если другие элементы следуют заданному в DOM. Что мы можем сделать, когда другие элементы должны быть на самом деле до зависшего? Скажем, мы хотим реализовать виджет рейтинга сигнального бара, как показано ниже:

Это можно сделать легко с помощью CSS flexbox модель, установив flex-direction to reverse , Так что элементы отображаются в порядке, противоположном тому, в котором они находятся в DOM. Скриншот выше из такого виджета, реализованного с помощью чистого CSS.

большое спасибо майку и Robertc за их полезные сообщения!

если у вас есть два элемента в HTML, и вы хотите, чтобы :hover над одним и целевым изменением стиля в другом два элемента должны быть непосредственно связаны-родители, дети или братья и сестры. Это означает, что два элемента либо должны находиться один внутри другого, либо оба должны содержаться в одном и том же более крупном элементе.

я хотел отобразить определения в поле на правой стороне браузера в качестве моего пользователи читают через мой сайт и :hover над выделенными терминами; поэтому я не хотел, чтобы элемент «определение» отображался внутри элемента «текст».

я почти сдался и просто добавил javascript на свою страницу,но это будущее! Мы не должны мириться с back sass из CSS и HTML, говорящих нам, где мы должны разместить наши элементы для достижения желаемых эффектов! В конце концов мы пошли на компромисс.

в то время как фактические элементы HTML в файл должен быть вложенным или содержаться в одном элементе, чтобы быть допустимым :hover цели друг к другу, css position атрибут может использоваться для отображения любого элемента, где вы хотите. Я использовал position: fixed для размещения цели my :hover действие, где я хотел его на экране пользователя, независимо от его местоположения в HTML-документе.

в этом примере объектом от элемент внутри #explainBox должен быть #explainBox или в #explainBox . Атрибуты позиции ,назначенные # definitions, заставляют его появляться в нужном месте (вне #explainBox ), хотя он технически расположен в нежелательной позиции в HTML-документе.

я понимаю, что считается плохой формой использовать то же самое #id для более чем одного элемента HTML; однако в этом случае экземпляры #light можно описать самостоятельно в силу своих позиций в уникальном ‘д’. Есть ли причина не повторять id #light в этом случае?

Как при наведении на элемент менять другой?

У меня проблема с CSS, я сделал 2 кнопки, при наведение на первую вторая меняется; я сделал то же самое, но наоборот и при наведение на второй кнопку, первая не меняется. Как исправить проблему?

Вопрос задан более двух лет назад
542 просмотра

Facebook
Вконтакте
Twitter

Нет, не сделали.
Знак «плюс» в селекторе означает выбор следующего элемента, который расположен на том же уровне, что и текущий.

В первом варианте всё сработало, так как второй элемент в Вашем коде действительно находится после первого.
Но вот второй вариант не работает.
И в CSS это невозможно.

В CSS можно обращаться только к элементам, которые идут после текущего (на том же уровне) или вложены в него. Но не наоборот.

CSS HOVER изменении свойств одного элемента при наведении курсора на другой

Для изменение свойства того или иного элемента в CSS существует такой понятие как селектор :hover.
Особенно широкое распространение hover приобретает когда нужно изменить свойство ссылки при наведении курсора. Например мы легко может подчеркнуть ссылку, которая по умолчанию не подчеркнута:

При помощи a:link и a:visited мы указали свойства для всех ссылок, в том числе тех по которым пользователь переходил ранее (:visited). Все ссылки приобретают зеленый цвет и становятся похожими на обычный текст, без подчеркивания. В то время как a:hover дает указание подчеркнуть ссылку при каждом наведении курсора.
Таким же образом мы можем добавить бордюр изображению при наведении мышки:
<style>
img <
border:1px solid green;
>
</style>
<img src=»https://weblomaster. ru/wp-content/uploads/2014/03/CSS_spaces_important_style_class_id-300×300.jpg» />

Поупражнявшись с простыми примерами, перейдем к более редкой задаче , которая была вынесена в заголовок статьи. Как изменить свойства дочернего элемента при наведении курсора на родительский элемент?
Ситуация разрешается очень просто . Вначале озвучивается родительский элемент с селектором :hover , затем идет обозначение дочернего элемента который необходимо трансформировать:

Как при наведении на один объект изменить свойства другого в css

Admin 01.03.2018 JavaScript

Если необходимо поменять свойства элемента при наведении на него, это легко сделать с помощью CSS. А когда требуется изменить другой элемент, то здесь придётся сочетать CSS с jQuery.

Мы сделаем так, чтобы при наведении мышки на один элемент (пусть это будет #mouseover) будет изменяться элемент с class=»what-will-be-changed».

В примере ниже у элемента будет изменяться фоновое изображение.

Создаём файл mouseover.js. Туда записываем следующий код:

Подключаем этот файл javasript-а на странице:

Для работы скрипта также надо подключить библиотеку jQuery (если она отсутсвует). Подключим библиотеку jquery.min.js от Google:

Загрузка библиотеки с сайта Google позволяет экономить на скорости загрузки сайта. Если пользователь ранее уже загрузил такую библиотеку в своём браузере, то она закешировалась и повторно грузиться не будет.

Каскад и наследование — Изучение веб-разработки

Обзор: Building blocks
Далее

Цель этого урока — углубить ваше понимание некоторых основополагающих концепций CSS — каскадов, спецификаций и наследования, — которые контролируют то, как CSS применяется к HTML и как разрешаются конфликты.

Хотя изучение этого урока может показаться менее актуальным и немного более академичным, чем некоторые другие части курса, понимание этих вещей спасёт вас от головной боли в дальнейшем! Мы рекомендуем вам внимательно изучить этот раздел и убедиться, что вы понимаете концепции, перед тем, как двигаться дальше.

Необходимые условия:	Базовая компьютерная грамотность, Установка базового ПО, базовые знания работы с файлами, основы HTML (Введение в HTML), и общее представление о том, как работает CSS (Введение в CSS.)
Цель:	Изучить понятие о каскаде и специфичности, и как работает наследование CSS.

CSS (Cascading Style Sheets) означает Каскадные Таблицы Стилей и первое слово «каскадные» является невероятно важным для понимания: то, как ведёт себя каскад — ключевой момент в понимании CSS.

В какой-то момент, работая над проектом, вы обнаружите, что CSS, который, по-вашему, должен быть применён к элементу, не работает. Обычно проблема заключается в том, что вы создали два правила, которые могут потенциально применяться к одному и тому же элементу. Каскад и тесно связанная концепция специфичности

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

Также значимой является концепция наследования, которая заключается в том, что некоторые свойства CSS наследуют по умолчанию значения, установленные для родительского элемента текущего элемента, а некоторые не наследуют. Это также может стать причиной поведения, которое вы, возможно, не ожидаете.

Давайте начнём с краткого обзора ключевых моментов, которых мы касаемся, далее рассмотрим каждый из них по очереди и посмотрим, как они взаимодействуют друг с другом и с вашим CSS. Это может показаться набором сложных для понимания понятий.

Однако, когда вы получите больше опыта в написании CSS, для вас станет более очевидным то, как это работает.

Каскад

Каскад таблицы стилей, если говорить упрощённо, означает, что порядок следования правил в CSS имеет значение; когда применимы два правила, имеющие одинаковую специфичность, используется то, которое идёт в CSS последним.

В приведённом ниже примере у нас есть два правила, которые могут применяться к h2. В результате h2 окрасится синим цветом — эти правила имеют идентичный селектор и, следовательно, одинаковую специфичность, поэтому побеждает последний в порядке следования.

Специфичность

Специфичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. Различные типы селекторов ( селекторы элементов h2{...}, селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы.

Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность. По существу, это мера того, насколько специфическим будет отбор по селектору:

Селектор элементов ( например h2 ) менее специфичен — он выберет все элементы этого типа на странице — поэтому получит меньше баллов.
Селектор класса более специфичен — он выберет только те элементы на странице, которые имеют конкретное значение атрибута class — поэтому получит больше баллов, селектор класса применится после селектора элемента и поэтому перекроет его стили

.

Например. Как указано ниже, у нас опять есть два правила, которые могут применяться к h2. h2 в результате будет окрашен красным цветом — селектор класса даёт своему правилу более высокую специфичность, поэтому он будет применён, несмотря на то, что правило для селектора элемента расположено ниже в таблице стилей.

Позже мы объясним, как сделать оценку специфичности, и прочие детали.

Наследование

Наследование также надо понимать в этом контексте — некоторые значения свойства CSS, установленные для родительских элементов наследуются их дочерними элементами, а некоторые нет.

Например, если вы установили значение color и font-family для элемента, то каждый элемент внутри него также будет иметь этот цвет и шрифт, если только вы не применили к ним напрямую стиль с другим цветом и шрифтом.

Некоторые свойства не наследуются — например, если вы установили для элемента width равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы чрезвычайно трудно использовать!

Примечание: На страницах справочника CSS-свойств вы можете найти окно технической информации, обычно в конце раздела спецификации, в котором перечислены некоторые технические данные об этом свойстве, в том числе наследуется оно или нет. Например, здесь: color property Specifications section.

Эти три концепции вместе определяют, какая CSS применяется и к какому элементу; в следующих разделах мы увидим, как они взаимодействуют. Это может показаться сложным, но вы начнёте лучше понимать их по мере приобретения опыта работы с CSS, и вы всегда можете обратиться к справочной информации, если что-то забыли. Даже опытные разработчики не помнят всех деталей!

Видео ниже показывает, как вы можете использовать Firefox DevTools для проверки каскада стилей, спецификации, и т.д. на странице:

Итак, наследование. В примере ниже мы имеем <ul> с двумя уровнями неупорядоченных списков, вложенных в него. Мы установили для внешнего <ul> стиль границы, внутренние отступы и цвет шрифта.

Цвет шрифта применён к прямому потомку, но также и к непрямому потомку — к прямому потомку <li> и к элементам внутри первого вложенного списка. Далее мы добавили класс special ко второму вложенному списку и применили к нему другой цвет шрифта. Теперь это свойство наследуется всеми его потомками.

Такие свойства, как ширина (как в примере выше), внутренние и внешние отступы и стиль границы не наследуются. Если бы потомки нашего списка наследовали бы границу, то каждый отдельный список и каждая позиция в списке получили бы такую же границу — вряд ли мы хотели бы получить такой эффект!

Какие свойства наследуются по умолчанию, а какие нет, чаще всего определяется здравым смыслом.

Контроль наследования

CSS предоставляет четыре специальных универсальных значения свойства для контроля наследования. Каждое свойство CSS принимает эти значения.

inherit: Устанавливает значение свойства, применённого к элементу, таким же, как у его родительского элемента. Фактически, это «включает наследование».
initial: Устанавливает значение свойства, применённого к выбранному элементу, равным initial value этого свойства (в соответствии с настройками браузера по умолчанию. Если в таблице стилей браузера отсутствует значение этого свойства, оно наследуется естественным образом.)
unset (en-US): Возвращает свойству его естественное значение, что означает, что если свойство наследуется естественным образом, оно действует как inherit, иначе оно действует как initial.

Примечание: Существует также более новое значение revert, которое имеет ограниченную поддержку браузерами.

Примечание: Смотрите Origin of CSS declarations в [Page not yet written] для более подробной информации о каждом из них, и о том, как они работают.

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

Например:

Второй элемент списка имеет класс my-class-1. Таким образом, цвет для следующего вложенного элемента a устанавливается по наследству. Как изменится цвет, если это правило будет удалено?
Понятно ли, почему третий и четвёртый элементы a имеют именно такой цвет? Если нет, перечитайте описание значений, представленное выше.
Какая из ссылок изменит цвет, если вы зададите новый цвет для элемента <a> — например: a { color: red; }?

Возврат всех исходных значений свойств

Стенографическое свойство CSS all можно использовать для того, чтобы присвоить одно из значений наследования к (почти) всем свойствам одновременно. Это одно из четырёх значений (inherit, initial, unset, или revert). Это удобный способ для отмены изменений, внесённых в стили, для того, чтобы вы могли вернуться к стартовой точке перед внесением новых изменений.

В примере ниже имеются два блока <blockquote>. Первый имеет стиль, который применён к самому элементу blockquote

, второй имеет класс fix-this, который устанавливает значение all в unset.

Попробуйте установить для all ещё одно из доступных значений и исследуйте, в чём заключается разница.

Теперь мы понимаем, почему параграф, следующий по глубине в структуре HTML документа, имеет тот же цвет, что CSS применяет к body, а вводные уроки дали понимание того, как изменить применение CSS к чему-либо в любой точке документа — или назначить CSS элементу, или создать класс. Теперь рассмотрим подробнее то, как каскад определяет выбор CSS-правил, применяемых в случае влияния на стиль элемента нескольких объектов.

Вот три фактора, перечисленные в порядке возрастания важности. Следующий отменяет предыдущий.

Порядок следования
Специфичность
Важность

Мы внимательно изучим их, чтобы увидеть, как именно браузеры определяют, какой CSS следует применить.

Порядок следования

Мы уже видели, какое значение для каскада имеет порядок следования. Если у вас несколько правил, которые имеют одинаковую важность, то побеждает правило, которое идёт последним в CSS. Другими словами, правила, более близкие к самому элементу, переписывают более ранние, пока последнее не победит, оно и стилизует элемент.

Специфичность

Понимая, что порядок следования правил имеет значение, в какой-то момент вы окажетесь в ситуации, когда вы знаете, что правило появляется позже в таблице стилей, но применяется более раннее, конфликтующее правило. Это связано с тем, что более раннее правило имеет более высокую специфичность — оно более специфично и поэтому выбирается браузером как правило, которое должно стилизовать элемент.

Как мы видели ранее в этом уроке, селектор класса имеет больший вес, чем селектор элемента, поэтому свойства, определённые в классе, будут переопределять свойства, применённые непосредственно к элементу.

Здесь следует отметить, что, хотя мы думаем о селекторах и правилах, применяемых к объекту, который они выбирают, переписывается не всё правило, а только свойства, которые являются одинаковыми.

Такое поведение помогает избежать повторения в вашем CSS. Обычной практикой является определение общих стилей для базовых элементов, а затем создание классов для тех, которые отличаются. Например, в таблице стилей ниже мы определяем общие стили для заголовков второго уровня, а затем создаём несколько классов, которые изменяют только некоторые свойства и значения. Определённые вначале значения применяются ко всем заголовкам, затем к заголовкам с классами применяются более конкретные значения.

Давайте теперь посмотрим, как браузер будет вычислять специфичность. Мы уже знаем, что селектор элемента имеет низкую специфичность и может быть перезаписан классом. По существу, значение в баллах присуждается различным типам селекторов, и их сложение даёт вам вес этого конкретного селектора, который затем может быть оценён в сравнении с другими потенциальными соперниками.

Степень специфичности, которой обладает селектор, измеряется с использованием четырёх различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы — четыре однозначные цифры в четырёх столбцах:

Тысячи: поставьте единицу в эту колонку, если объявление стиля находится внутри атрибута style (встроенные стили). Такие объявления не имеют селекторов, поэтому их специфичность всегда просто 1000.
Сотни: поставьте единицу в эту колонку за каждый селектор ID, содержащийся в общем селекторе.
Десятки: поставьте единицу в эту колонку за каждый селектор класса, селектор атрибута или псевдокласс, содержащийся в общем селекторе.
Единицы: поставьте общее число единиц в эту колонку за каждый селектор элемента или псевдоэлемент, содержащийся в общем селекторе.

Примечание: Универсальный селектор (*), комбинаторы (+, >, ~, ») и псевдокласс отрицания (:not) не влияют на специфичность.

Следующая таблица показывает несколько несвязанных примеров, которые помогут вам разобраться. Посмотрите их все и убедитесь, что вы понимаете, почему они обладают той специфичностью, которую мы им дали. Мы ещё не рассмотрели селекторы детально, но вы можете найти подробную информацию о каждом селекторе в справочнике селекторов MDN.

Прежде чем мы продолжим, давайте посмотрим на пример в действии.

Так что здесь происходит? Прежде всего, нас интересуют только первые семь правил этого примера, и, как вы заметите, мы включили их значения специфичности в комментарий перед каждым правилом.

Первые два правила конкурируют за стилизацию цвета фона ссылки — второе выигрывает и делает фоновый цвет синим, потому что у него есть дополнительный селектор ID в цепочке: его специфичность 201 против 101.
Третье и четвёртое правило конкурируют за стилизацию цвета текста ссылки — второе выигрывает и делает текст белым, потому что, хотя у него на один селектор элемента меньше, отсутствующий селектор заменяется на селектор класса, который оценивается в десять вместо единицы. Таким образом, приоритетная специфичность составляет 113 против 104.
Правила 5–7 соревнуются за определение стиля границы ссылки при наведении курсора. Шестой селектор со специфичностью 23 явно проигрывает пятому со специфичностью 24 — у него в цепочке на один селектор элемента меньше. Седьмой селектор, однако, превосходит как пятый, так и шестой — он имеет то же количество подселекторов в цепочке, что и пятый, но один элемент заменён селектором класса. Таким образом, приоритетная специфичность 33 против 23 и 24.

Примечание: Это был условный пример для более простого усвоения. В действительности, каждый тип селектора имеет собственный уровень специфичности, который не может быть замещён селекторами с более низким уровнем специфичности. Например, миллион соединённых селекторов класса не способны переписать правила одного селектора id.

Более правильный способ вычисления специфичности состоит в индивидуальной оценке уровней специфичности, начиная с наивысшего и продвигаясь к самому нижнему, когда это необходимо. Только когда оценки уровня специфичности совпадают, следует вычислять следующий нижний уровень; в противном случае, вы можете пренебречь селекторами с меньшим уровнем специфичности, поскольку они никогда не смогут преодолеть уровни более высокой специфичности.

!important

Существует специальный элемент CSS, который вы можете использовать для отмены всех вышеперечисленных вычислений, однако вы должны быть очень осторожны с его использованием — !important. Он используется, чтобы сделать конкретное свойство и значение самыми специфичными, таким образом переопределяя нормальные правила каскада.

Взгляните на этот пример, где у нас есть два абзаца, один из которых имеет ID.

Давайте пройдёмся по этому примеру, чтобы увидеть, что происходит — попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:

Вы увидите, что применены значения color (en-US) и padding третьего правила, но background-color — нет. Почему? Действительно, все три безусловно должны применяться, потому что правила, более поздние в порядке следования, обычно переопределяют более ранние правила.
Однако вышеприведённые правила выигрывают, потому что селекторы классов имеют более высокую специфичность, чем селекторы элементов.
Оба элемента имеют class с названием better, но у второго также есть id с названием winning. Поскольку ID имеют ещё более высокую специфичность, чем классы (у вас может быть только один элемент с каждым уникальным ID на странице, но много элементов с одним и тем же классом — селекторы ID очень специфичны, на что они и нацелены), красный цвет фона и однопиксельная чёрная граница должны быть применены ко 2-му элементу, причём первый элемент получает серый фоновый цвет и отсутствие границы, как определено классом.
2-й элемент получил красный цвет фона и отсутствие границы. Почему? Из-за объявления !important во втором правиле — размещение которого после border: none означает, что это объявление перевесит значение границы в предыдущем правиле, даже если ID имеет более высокую специфичность.

Примечание: Единственный способ переопределить объявление !important – это включить другое объявление !important в правило с такой же специфичностью позже или в правило с более высокой специфичностью.

Полезно знать о существовании !important, чтобы вы понимали, что это такое, когда встретите в чужом коде. Тем не менее, мы настоятельно рекомендуем вам никогда не использовать его, если в этом нет острой необходимости. !important меняет обычный порядок работы каскада, поэтому он может серьёзно затруднить отладку проблем CSS, особенно в большой таблице стилей.

Одна из ситуаций, в которой вам, возможно, придётся это использовать, — это когда вы работаете с CMS, где вы не можете редактировать модули CSS ядра, и вы действительно хотите переопределить стиль, который нельзя переопределить другим способом. Но, вообще говоря, не стоит использовать этот элемент, если можно этого избежать.

Наконец, также полезно отметить, что важность объявления CSS зависит от того, в какой таблице стилей оно указано — у пользователя есть возможность установить индивидуальные таблицы стилей для переопределения стилей разработчика, например, пользователь может иметь проблемы со зрением и захочет установить размер шрифта на всех посещаемых им веб-страницах в два раза больше нормального размера, чтобы облегчить чтение.

Конфликтующие объявления будут применяться в следующем порядке, с учётом замены более ранних более поздними:

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

Для таблиц стилей веб-разработчиков имеет смысл переопределить пользовательские таблицы стилей так, чтобы можно было сохранить запланированный дизайн, но иногда у пользователей есть веские причины для переопределения стилей веб-разработчика, как упомянуто выше — это может быть достигнуто с помощью использования !important в их правилах.

Мы охватили много тем в этой статье. А вы смогли запомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите Test your skills: the Cascade.

Если вы поняли большую часть этой статьи, отлично — вы начали знакомиться с фундаментальными механизмами CSS. Далее мы рассмотрим селекторы подробно.

Если вы не до конца поняли каскад, специфичность и наследование, не волнуйтесь! Это, безусловно, самая сложная вещь из тех, что мы до сих пор изучали в курсе, и даже профессиональные веб-разработчики иногда считают её коварной. Мы советуем вам вернуться к этой статье несколько раз в ходе изучения курса и продолжать обдумывать эту тему.

Обратитесь сюда, если вы столкнётесь со странными проблемами, когда стили применяются не так, как вы ожидаете. Это может быть проблемой специфичности.

Обзор: Building blocks
Далее

Каскад и наследование
Селекторы CSS
- Селекторы типа, класса и ID
- Селекторы атрибута
- Псевдоклассы и псевдоэлементы
- Комбинаторы
Модель коробки (The box model)
Фон и границы
Обработка разных направлений текста
Переполнение содержимого
Значения и единицы измерения
Изменение размеров в CSS
Элементы изображений, форм и медиа-элементы
Стилизация таблиц
Отладка CSS
Организация вашей CSS

Last modified: 4 авг. 2022 г., by MDN contributors

Css как при наведении на один элемент изменить другой

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. Check out the browser extension in the Chrome Web Store.

Cloudflare Ray ID: 724ded83bea27732 • Your IP: Click to reveal 109.70.150.94 • Performance & security by Cloudflare

Как при наведении на один элемент (hover) менять стили другого элемента css?

Есть вертикальный блок навигации, список, в каждом <li> лежит картинка и заголовок.
Цель: при наведении мышки на элемент списка -> изменять картинку.
Как изменять саму картинку при наведении на нее — я знаю, мне нужно, чтобы наводя на один элемент->изменялся другой.

Но он как я понял, работает он только ID, т.е. работает только с одним <li>, и создавать кучу id как-то не очень.

Как при наведении на один элемент, менять стили другого элемента css?
Здравствуйте! Возник вопрос. Как при наведении на один елемент, изменять стили остальных.

Как имитировать событие hover элемента А при наведении на элемент Б?
<div <div <div .

Установить значение css hover для другого элемента
Ребят, подскажите пожалуйста такую вещь. Например есть структура: <div <div.

Как отредактировать стили элемента при динамичексом изменении css
В общем такая проблема. На сайте когда открываю код элемента, он постоянно обновляется и не дает.

Сообщение от Strikeby

потому что предназначено для изменения конкретного элемента
без конкретного кода html не понятно что нужно, какой список, какая картинка, как они расположены относительно друг друга?

Strikeby, в редакторе есть куча кнопочек для выделения кода, иначе не читабельно

Сообщение было отмечено Strikeby как решение

Решение

Сообщение от Strikeby

CSS — почему :hover при наведении курсора не берет всю область под указанный ему цвет
Добрый день всем! За ранее благодарен тому кто откликнется. :hover не берет всю область под.

можно ли менять id элемента при наведении?
Здравствуйте. Такая проблема. Есть большой скрипт, который ссылается на элемент с ИДом. Но мне.

Записать два элемента одного массива, как один элемент другого
Здравствуйте) есть такое задание: нужно составить таблицу истинности(дискретная математика). И в.

Мигает флеш при hover другого элемента
в опере и яндекс браузере при наведении на картинку (клиента) мигает флешка логотипа.

Работа с эффектами наведения CSS

Селектор :hover определят стиль элемента при наведении курсора мыши. Этот селектор можно использовать для всех элементов, а не только для ссылок. Псевдокласс CSS :hover запускается, когда пользователь наводит указатель мыши на элемент.

Стили, определяемые активами псевдо-класса, будут переопределены любым последующим классом. Например, :link, :active или :visited, который имеет хотя бы один равный атрибут. Поэтому используйте псевдокласс hover после :link и :visit, но перед :active.

Пример ссылок с разными стилями:

Пример применения псевдокласса к элементу <span>. Эффект проявляется при наведении курсора на элемент <div>:

Выпадающее меню

Пример, в котором мы будем отображать выпадающее меню при наведении курсора мыши:

Другой стиль

Еще один пример эффекта при наведении, но уже с другим стилем:

Нижняя граница становится фоном

Пример, в котором при наведении курсора на ссылку нижняя граница строки увеличивается и становится фоном:

Уменьшение интенсивности цвета

Эффект :hover, который проявляется уменьшением интенсивности цвета. Это отличный способ привлечь внимание к важному элементу на странице:

Увеличение ширины и высоты

Вы можете использовать свойство transform для увеличения ширины и высоты элемента при наведении курсора:

Вращение элемента

CSS-преобразования также можно использовать для реализации эффекта вращения элемента

Изменение формы элемента

Еще один популярный эффект – превращение круглого элемента в квадратный и наоборот

Изменение цвета границ

Еще один интересный эффект – изменение цвета границ элемента при наведении курсора. Для его реализации применяется переход с использованием тени для блока:

Поддержка браузерами: Google Chrome, Microsoft Edge, Firefox, Opera, Safari.

Заключение

CSS3 позволяет создавать множество красивых эффектов без использования Java Script. Это доказывают приведенные выше примеры.

Дайте знать, что вы думаете по данной теме статьи в комментариях. Мы крайне благодарны вам за ваши комментарии, отклики, подписки, дизлайки, лайки!

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

CSS-селектор :not. Полезные примеры

В спецификации и блогах про селектор :not обычно приводят какие-то искусственные примеры, которые хоть и объясняют синтаксис и принцип действия, но не несут никакой идеи о том, как получить пользу от нового селектора.

Например:

p:not(.classy) { color: red; }

Ну окей, думаю я, в моей практике не встречались такие ситуации. Обходились мы ведь как-то раньше без :not. Приходилось немного переписать структуру селекторов или обнулить пару значений.

Пример 1. Элемент без класса

Селектор :not может быть крайне полезен, когда нам нужно застилить контент сгенерированный пользователем (нет возможности расставить в нем классы), или когда у нас контента очень много и расставлять в нем классы слишком трудоёмко.

Например, мы хотим на сайте сделать красивые буллиты для ненумерованных списков ul li. Мы пишем код:

ul li { /* наши красивые стили */ }

В результате, наши красивые буллиты появляются не только в контенте, но и, например, в навигации, где тоже используются ul li.

Мы ограничиваем область действия селектора:

.content ul li { /* красота */ }

Навигацию мы спасли, но ненужные буллиты всё еще вылазят на слайдерах, списках новостей и других конструкциях внутри .content, где тоже используются ul li.

Далее у нас варианты:

1) обнулить мешающие стили в слайдерах и других местах. Но это противоречит «DRY» и является одним из признаков «вонючего» кода. К тому же не решает проблему раз и навсегда: добавите, например, аккордеон и списки в нем снова придется обнулять.

2) пойти от обратного и ставить класс всем спискам, которые нужно стилизовать:

.textlist li { /* красота */ }

Это добавляет лишней работы по расстановке классов в контенте. Иногда имеет смысл, но лишнюю работу никто не любит.

3) стилизовать только те ul li, у которых нет никаких классов вообще:

ul:not([class]) li { /* красота */ }

Победа! Нам не нужно делать дополнительную работу по расстановке классов в контенте. А на слайдерах, аккордеонах и прочих конструкциях, которые не должны выглядеть как списки, но используют их в своей разметке, в 99% случаев уже будут свои классы, и наши стили их не затронут.

Этот прием — «выбирать только элементы без класса» — очень полезен для оформления пользовательского контента и его можно применять не только к спискам, но и для других случаев.

Пример 2. Изменение внешнего вида всех элементов, кроме наведенного

Пример

Такой эффект можно реализовать без :not путем перезаписи значений. И это будет работать в бо́льшем количестве браузеров.

/* с перезаписью свойств */
ul:hover li {
  opacity:0.5;
}
ul:hover li:hover {
  opacity:1;
}

Но если придется обнулять слишком много свойств, то есть смысл использовать :not.

/* используя :not() */
ul:hover li:not(:hover) {
  opacity:0.5;
}

Пример 3. Меню с разделителями между элементами

Пример

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

Через перезапись свойств. Но тут два правила вместо одного, что не есть «DRY».

.menu-item:after {
  content: ' | ';
}
.menu-item:last-child:after {
  content: none;
}

Через :nth-last-child(). Одно правило, но тяжело читается.

. menu-item:nth-last-child(n+2):after {
  content: ' | ';
}

Через :not() — самая короткая и понятная запись.

.menu-item:not(:last-child):after {
  content: ' | ';
}

Пример 4. Debug css

Удобно для отладки и самоконтроля искать/подсвечивать картинки без alt, label без for и другие ошибки.

/* подсвечиваем теги без необходимых атрибутов */
img:not([alt]),
label:not([for]),
input[type=submit]:not([value]) {
  outline:2px solid red;
}
/* тревога, если первый child внутри списка не li и прочие похожие примеры */
ul > *:not(li),
ol > *:not(li),
dl > *:not(dt):not(dd) {
  outline:2px solid red;
}

Пример 5. Поля форм

Раньше текстовых полей форм было не много. Достаточно было написать:

select,
textarea,
[type="text"],
[type="password"] {
    /* стили для текстовых полей ввода */
}

С появлением новых типов полей в HTML5 этот список увеличился:

select,
textarea,
[type="text"],
[type="password"],
[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="number"],
[type="search"],
[type="tel"],
[type="time"],
[type="url"],
[type="month"],
[type="week"] {
  /* стили для текстовых полей ввода */
}

Вместо перечисления 14 типов инпутов можно исключить 8 из них:

select,
textarea,
[type]:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]) {
  /* стили для текстовых полей ввода */
}

Ладно, этот пример не очень красив, и я рекомендую всё же первый вариант с перечислением, он работает с IE8+, а второй вариант с IE9+.

Поддержка

Следует заметить, что согласно спецификации в скобках селектора :not() может стоять только простой селектор и в скобках нельзя использовать сам селектор :not(). Если нужно исключить несколько элементов, :not() можно повторить несолько раз, как в примере 5.

Поддержка браузерами

Если очень нужны CSS3-селекторы в браузерах, которые их не поддерживают, можно использовать полифил selectivizr.

Почему инлайнить стили — плохо — Блог HTML Academy

Стилизовать страницу можно разными способами: встроить стили прямо в HTML, импортировать, создать с помощью JavaScript или подключить из отдельного файла. Среди разработчиков хорошим тоном считается использовать последний способ, то есть писать стили в отдельном файле и затем подключать их с помощью тега link. А вот внутренних стилей стараются избегать, хотя их применение тоже бывает оправдано.

Встроить стили глобально:

<head>
  <style>
      . block {...}
      ...
  </style>
</head>

Встроить с помощью атрибута style:

<body>
  <div></div>
</body>

Импортировать стили из внешних файлов:

@import "style/header.css"
@import "style/footer.css"

Подключить внешние таблицы стилей:

<head>
  <link href="css/style.css" rel="stylesheet">
</head>

Почему разработчики предпочитают внешние стили

Чаще всего в веб-разработке можно встретить проекты с внешними таблицами стилей. Дело в том, что такой способ стилизации удобен не только для создания сайтов или веб-приложений с нуля, но и для их дальнейшей поддержки. С его помощью легко управлять CSS-правилами, следить за наследованием и каскадностью, поддерживать чистоту кода в целом.

Inline-стили не так гибки, как внешний CSS. Их сложнее поддерживать и почти невозможно переопределить. Из-за внутренних стилей HTML-файл раздувается и становится тяжелее. Функциональность CSS не так обширна, как при работе с внешними стилями. Чтобы понять всю глубину проблемы, сравним оба способа стилизации.

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

Пример стилей в стороннем CSS-файле

При использовании внешнего CSS вы видите структуру своего проекта. Вы понимаете, где и какие свойства заданы элементу и можете легко их изменить. Вы понимаете логику: какие свойства переопределены и почему. Разбираетесь в наследовании и каскадировании и можете управлять ими.

С inline-стилями немного иначе. Если писать стили внутри атрибута style, то HTML становится трудночитаемым. Логическая структура исчезает и стили размываются по всему коду. Следить за стилизацией становится непросто, а поиск фрагмента, в котором нужно изменить CSS-правило, отнимает немало времени. И чем крупнее проект, тем сложнее управлять стилизацией.

Если вынести весь CSS в тег <style>, логическая структура сохранится, а HTML останется легко читаемым. Но всё же этот способ тоже не всегда удобен. Представьте, что вам нужно изменить размер заголовков на всех страницах сайта. Если вы работаете с отдельным стилевым файлом, вам нужно изменить стили только в одном месте. Но при использовании инлайн-стилей вам придется менять размер заголовков в каждом HTML-файле.

Дополнительная функциональность. Внешние стили позволяют гибко использовать псевдоклассы и псевдоэлементы. Например, разработчик может задать интерактивные состояния отдельно выбранным кнопкам, стилизовать каждый чётный элемент списка или выполнить другие задачи.

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

Пример стилей в стороннем CSS-файле

Переменные содержат все цвета, используемые на сайте. Если заказчик захочет использовать зелёный другого оттенка, разработчику не нужно будет искать и менять каждое стилевое правило с этим цветом. Он просто изменит цвет в одной переменной.

Добавлять псевдоклассы можно и с помощью глобальных стилей, но это не всегда удобно. Предположим, на странице есть две ссылки, которым нужно задать особые интерактивные состояния :hover и :active. Остальные ссылки нужно стилизовать иначе. В этом случае неудобно прописывать псевдоклассы в теге <style>, потому что все ссылки приобретут одинаковое интерактивное состояние. А переопределить его с помощью атрибута style не получится, потому что псевдоклассы и псевдоэлементы не работают в inline CSS.

Есть еще одна проблема: стилевые правила атрибута style переопределяют правила из тега <style>. К примеру, вы хотите, чтобы ссылки при наведении становились красными и задаёте в глобальных стилях a:hover {color: red}. Но если вы решите у одной из кнопок изменить цвет с помощью атрибута style, она потеряет интерактивное состояние.

Дублирование кода. Один из важнейших принципов разработки — Don’t repeat yourself или DRY. Он означает, что ваш код не должен повторяться. К примеру, если у вас встречаются кнопки с одинаковым оформлением, было бы ошибкой для каждой из них заново прописывать цвет, размер и другие параметры.

С внешними таблицами стилей проще придерживаться принципа DRY. Ведь в этом случае все стили, которыми нужно управлять, находятся в одном месте, а не на нескольких страницах проекта.

Переопределение стилей. Стили из внешнего CSS файла легко переопределять, так как у каждого селектора своё значение специфичности. Класс приоритетнее селектора тега, а идентификатор приоритетнее класса.

Внутренние стили имеют наивысший приоритет, их нельзя переопределить с помощью селекторов по ID, классу или тегу во внешнем CSS. Единственный способ это сделать — добавить !important к значению стилевого свойства. Но этот приём тоже считается дурной практикой, так как ещё больше усложняет поддержку.

Пример достаточно крупного сайта. Из-за того, что размеры заголовка заданы инлайн, разработчику пришлось переопределять их внутри файла CSS с помощью `! important.`

Скорость загрузки и трафик. Во время первой загрузки страницы внешние стили отображаются с задержкой: браузеру нужно время, чтобы скачать стилевой файл. Особенно заметно такое поведение при медленном интернет-соединении. Понадобится несколько сотен миллисекунд или даже целые секунды, чтобы на странице появились стили. К тому же внешний стилевой файл относится к блокирующим ресурсам. Пока он не загрузится, рендеринг в браузере не завершится.

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

Внутренняя стилизация содержится непосредственно в HTML-коде, поэтому с каждым новым правилом вес файла будет увеличиваться. Вместе с ним растёт количество потребляемого трафика и уменьшается скорость загрузки страницы. На небольших сайтах эта проблема может быть не так критична. Но на крупных интернет-магазинах или порталах, а также при медленном интернет-соединении разница будет очевидна и грозит потерей посетителей.

Когда можно использовать inline-стили?

Внутренние стили имеют серьезные недостатки, поэтому фронтенд-разработчики редко используют их в работе. Но у этого способа стилизации есть и положительные стороны.

Ускорение отрисовки страниц. Мы уже упоминали принцип работы браузера: при подключении внешнего CSS ему приходится отправлять дополнительный запрос на сервер, чтобы скачать стилевой файл. Но в случае с inline-стилями этого делать не нужно. Они уже доступны, так как содержатся непосредственно в файле HTML, поэтому при первой загрузке стили отрисуются быстрее.

Это преимущество работает на небольших страницах, не перегруженных стилями, но его можно использовать и на крупных ресурсах для повышения производительности CSS. С помощью inline-стилей вы можете ускорить отображение той части сайта, которую пользователи должны увидеть первой. Например, меню и первый блок с информацией. Всё, что для этого нужно — прописать стили этих блоков и элементов внутри HTML.

Почтовые рассылки. Ещё один случай, когда вы можете использовать внутренние стили — создание email-рассылок. По соображениям безопасности почтовые сервисы блокируют загрузку внешних ресурсов, в том числе стилевых файлов в HTML-коде письма. Например, по таким принципам работают Яндекс.Почта, Yahoo, Gmail и другие почтовые клиенты. Поэтому у разработчиков нет иного выхода, кроме как использовать inline CSS.

Пример вёрстки письма с добавлением внутренних стилей

Тестирование и работа со сторонними программами. Inline-стили также бывают удобны, если стилизация задана с помощью сторонних программ или через CMS. Некоторые разработчики используют внутренние стили для поиска и решения каких-то ошибок. За счет каскадности правила внутри атрибута style переопределяют другие стили, поэтому можно временно прописать правила CSS в разметке и посмотреть на отображение элементов. Но этот способ лучше использовать с осторожностью и по возможности сразу вносить правки во внешний стилевой файл.

Применение inline-стилей не самая распространённая практика, чаще всего вам предстоит использовать внешний CSS. Но помните, что внутренние стили тоже бывают полезны.

Умение уместно использовать внутренние стили — навык, которым должен обладать каждый фронтенд-разработчик. Если вы хотите освоить разные способы подключения стилей и поближе познакомиться с CSS, попробуйте наши тренажёры. Они помогут вам разобраться со всеми вариантами стилизации, как внутренними, так и внешними.

Соберитесь, пора разобраться

С HTML, CSS, JavaScript, PHP, фронтендом, бэкендом, фулстеком, Node. js, анимациями и всем остальным, чтобы устроиться на работу мечты.

Регистрация

Как повлиять на другие элементы при наведении курсора на один элемент в CSS?

Посмотреть обсуждение

Улучшить статью

Сохранить статью

Последнее обновление: 20 июн, 2022

Читать

Обсудить

Посмотреть обсуждение

Улучшить статью

Сохранить статью

В этой статье мы увидим, как повлиять на другие элементы, когда один элемент зависает, используя CSS. если мы определяем 2 HTML-элемента, в которых мы хотим навести курсор на один элемент и в то же время хотим изменить стиль другого элемента, тогда оба элемента должны быть напрямую связаны либо как родитель-потомок, либо как родственный элемент, что указывает на то, что один элемент должен быть внутри другого элемента или оба элемента должны быть внутри одного и того же целевого элемента, чтобы можно было увидеть эффект наведения. Наведение используется для добавления стиля к элементам, когда мышь наводит на них курсор, т. е. когда вы наводите курсор на элемент, появляется некоторый текст, который сообщает вам о функциональности этого элемента. Обычно он используется для навигации, когда пользовательский интерфейс любого веб-сайта или программного обеспечения сложен.

Подход: Эта задача может быть выполнена путем добавления одного элемента внутрь другого элемента и, соответственно, объявления необходимых свойств CSS для родительско-дочерних элементов, чтобы при наведении курсора за пределы элемента автоматически изменялось свойство внутреннего элемента. .

Пример 1: В приведенном ниже примере мы увидим, как влияет на другой элемент, когда мы наводим указатель мыши на один элемент.

HTML

< html >

< head >

< style >

body {

text-align: center;

}

h2 {

цвет: зеленый;

}

. PARENT {

Width: 600PX;

высота: 200 пикселей;

background-color: светло-серый;

}

. Child {

MARGE-LEFT: 45PX;

ширина: 100 пикселей;

высота: 30 пикселей;

background-color: серый;

}

div {

контур: 1 пиксель сплошной зеленый;

}

стиль >

head >

< body >

< h2 >GeeksforGeeks h2 >

< H4 >

ВЫСОВАНИЕ ОДИН Элемент, чтобы изменить

.0042 the effect to other element

h4 >

< div class = "parent" > GeeksforGeeks

< DIV Класс = «Ребенок» >

Geeksforgeeks

   . 0040               div   > 
             <   br   > 
             <   div   class   =   "child"   > 
    Geeksforgeeks 
      Div  > 
    <   br   > 
             <   div   class   =   "child"   > 
                 GeeksforGeeks  
               div   > 
           div   > 
    >
2
    HTML  >

Объяснение: В приведенном выше примере мы сделали два элемента Div, названные родителей и . Если мы наведем указатель мыши на родительский элемент, это автоматически повлияет на дочерний элемент.

Вывод:

Пример 2 : В приведенном ниже примере мы создадим два элемента div. Когда вы наводите курсор на один элемент, другие элементы меняют свои свойства.

HTML

< html >

< head >

< style >

body {

text-align: center;

}

H2 {

Цвет: зеленый;

}

. PARENT {

Width: 600PX;

высота: 200 пикселей;

цвет фона: светло-серый;

}

. Child {

Width: 30px;

высота: 30 пикселей;

background-color: серый;

}

div {

контур: 1 пиксель сплошной черный;

}

9004 {ребенок0003

background-color: #4CAF50;

граница: нет;

цвет: белый;

отступы: 50 пикселей 160 пикселей;

margin-top: 50px;

text-align: center;

украшение текста: нет;

дисплей: встроенный блок;

размер шрифта: 16 пикселей;

}

style >

head >

< body >

< h2 >GeeksforGeeks h2 >

< h4 >

Element's property will change when

hovering to other element

h4 >

< деление 2 класс 20042 = "parent" >

< button class = "child" >

GeeksforGeeks

кнопка >

раздел >

2 корпус0041>

HTML >

Выход:

New Media

18 New Media Media Media Media Media18

00 New Media

118

Как изменить стиль при наведении

Учебный сценарий NMD

Сценарий Джона Ипполито, версия 1. 0

Зачем менять стиль при наведении?

Один из самых простых способов сделать веб-страницу более отзывчивой — изменить внешний вид элемента — ссылки, изображения или элемента div (прямоугольника) — когда пользователь наводит на него мышь или сенсорную панель.

Предпосылки

Вы должны знать, как подготовить свой компьютер к веб-проектам, и иметь базовое представление об анатомии веб-страницы, включая HTML, CSS и JavaScript.

Этот конкретный скринкаст будет использовать платформу TK и softwareTK.

Урок

1. Измените стиль, используя только CSS

Если вы достаточно знаете CSS, чтобы идентифицировать элемент по идентификатору (#) или классу (.), вы можете добавить селектор :hover, чтобы изменения отображались только тогда, когда пользователь наводит указатель мыши на элемент.

/* Прямоугольник обычно синий. */

div #kitten {

background-color: blue ;

}

/* Если пользователь наведет курсор мыши на прямоугольник, он станет красным. */

div #kitten :hover {

background-color: red ;

}

2. Измените стиль с помощью встроенного JavaScript.

Вы также можете изменить стиль при наведении с помощью JavaScript. Давайте начнем с того, что сделаем это методом грубой силы, а именно внутри самого HTML-тега.

...

Код JavaScript должен быть заключен в кавычки к тегу HTML с помощью обработчиков событий, таких как onmouseover и onmouseout, которые заменяют селектор CSS :hover. Внутри этих кавычек для преобразования CSS в JavaScript требуются следующие преобразования:

Используйте ключевое слово JavaScript this для автоматической ссылки на любой HTML-элемент (тег), с которым взаимодействует пользователь.
Добавьте свойство .style. в конец элемента, чтобы показать, что вы меняете его стиль.
Преобразование атрибутов CSS с дефисом (background-color) в атрибуты JavaScript camelCase (backgroundColor. )
Преобразовать двоеточие (:) в знак равенства (=).
Заключить значение атрибута в кавычки ("красный").

Обратите внимание, что вы должны использовать одинарные кавычки ('') внутри двойных кавычек (""), если вы не хотите, чтобы браузер запутался.

Недостатком этого метода является то, что вам нужно добавить новые строки JavaScript для каждого стилистического атрибута (цвет, граница, ширина), который вы хотите изменить. Давайте исправим это.

3. Измените несколько атрибутов стиля, изменив класс.

Более простой способ изменить сразу несколько стилей — связать их с классом CSS в вашей таблице стилей, а затем использовать JavaScript для изменения класса.

<стиль>

. подсветка выключена {

цвет фона: синий ;

граница: нет ;

}

. подсветка включена {

цвет фона: красный ;

граница: красная пунктирная ;

}

. ..

...

Две детали, которые могут сбить вас с толку:

Вам не нужно ключевое слово .style., так как класс уже представляет собой кучу стилей.
Не используйте .class, который имеет другое значение в JavaScript; используйте .имя_класса.

4. Измените класс в JavaScript вместо HTML.

Добавление JavaScript в HTML-теги («встроенные») негибко, отнимает много времени и просто неуклюже. К счастью, вы можете изменить стили или классы HTML-элементов в JavaScript вверху страницы или в отдельном файле, например highlight.js .

Мы будем использовать тот факт, что метод JavaScript document.getElementById(" котенок ") эквивалентен селектору CSS # котенок . Обратите внимание на использование заглавных букв в верблюжьем регистре Id — сокращение от Identity. Если вы случайно напишете getElementByID, JavaScript выдаст ошибку.

...

Это почти правильно, но, к сожалению, браузер просто выполнит this.className = ' highlight-on ' and this.className=' highlight-off ' одно за другим, и мы никогда не получим подсветку 🙁

Когда вы хотите, чтобы браузер ждал выполнения кода до тех пор, пока пользователь не наведет курсор мыши на элемент, или дождался какого-либо действия, на самом деле --оберните этот код в функцию. В этом случае мы будем использовать "анонимные функции", то есть функции, определенные прямо на месте, без имен, потому что они не сработают преждевременно и поймут, что это элемент, который пользователь перевернул

<скрипт>

document. getElementById (" котенок " ).onmouseover = function() {

this.className = ' highlight-on ' ;

}

document.getElementById( " котенок " ).onmouseout = function() {

0 this.className = '

highlight-off ';

}

...

Мы почти у цели, но есть одна маленькая проблема. Если вы загрузите страницу таким образом, ваш браузер сообщит вам, что document.getElementById(" котенок ") не определено, несмотря на то, что вы можете увидеть div прямо в HTML. Причина этой ошибки в том, что браузер читает код сверху вниз, и он сталкивается с кодом внутри тегов скрипта перед ним знает, что внизу есть div с именем " котенок ".

Решение состоит в том, чтобы дождаться загрузки всех элементов div в теле, прежде чем добавлять поведение наведения. Как обычно, мы задержим JavaScript, заключив его в функцию — в данном случае 9. 0027 setHover() --и запускать эту функцию только после загрузки страницы.

...

Это намного лучше JavaScript.

Тем не менее, пока что это не улучшение селектора CSS :hover, который короче и не требует добавления onmouseover и onmouseout в каждый div. К счастью, мы можем заставить JavaScript автоматически добавлять все эти поведения.

5. Измените класс каждого блока div с помощью цикла JavaScript.

Если вы хотите автоматизировать что-то в JavaScript, попробуйте цикл for. Мы можем использовать document. getElementsByTagName(" div "), чтобы захватить все div на странице и сделать их выделяемыми.

...

6. Зачем весь этот JavaScript?

Да, мы могли бы придать всем элементам div поведение при наведении курсора с помощью CSS. Но JavaScript позволяет делать гораздо больше: при наведении на элемент div может появиться всплывающее предупреждение, вызвать функцию, загружающую новый контент, или добавить текущий товар в корзину.

делений [ divCounter ].onmouseover = function() {

this.className = ' выделение-на ';

alert(" Вы сделали правильный выбор! ") ;

loadContentInto (это);

addToShoppingCart (это);

}

И хотя CSS реагирует только на поведение при наведении, JavaScript может реагировать на при наведении курсора мыши, щелчке мыши, фокусе и т. д.:

divs [ divCounter ].onclick = function() {

alert(" Вы просили об этом - я переношу вас на другую страницу! ") ;

window. location = " other_page.html ";

}

7. Выборочное определение поведения элементов div.

Возможно, вы хотите, чтобы элементы div в меню навигации реагировали определенным образом через при нажатии или при наведении мыши . Не беспокойтесь: дайте им тот же класс в HTML, а затем включите оператор if в свой JavaScript, чтобы отфильтровать нужные вам элементы div.

...

Поздравляем! Теперь вы знаете, как использовать CSS для изменения внешнего вида HTML-элементов, когда пользователь наводит на них указатель мыши, и как использовать JavaScript для обеспечения гораздо более сложного взаимодействия с пользователем.

штатов | Webflow University

Вы можете добавить интерактивности своим элементам, изменив их внешний вид и поведение в разных состояниях.

В этом уроке:

Стиль элемента в различных состояниях
Возврат к стилю состояния по умолчанию
Удаление стиля элемента в состоянии
Стиль текущего состояния элементов ссылки унаследовано от

Стиль элемента в различных состояниях

Чтобы применить различные стили к элементу в различных состояниях, например, в состоянии наведения, откройте раскрывающееся меню «Состояния» в селекторе панели «Стиль» и выберите состояние, для которого требуется применить стиль.

Когда вы выбираете состояние в раскрывающемся меню «Состояния» в селекторе, в конце поля селектора появляется зеленый класс состояния, также называемый псевдоклассом. Это указывает на то, что вы сейчас стилизуете это состояние для своего элемента.

Вы можете выбрать любое количество стилей. Вносимые здесь изменения стиля — это то, что пользователи увидят, взаимодействуя с этим элементом.

В каком бы состоянии вы ни находились, внесенные вами изменения будут видны на холсте до тех пор, пока вы не отмените выбор или не покинете это состояние иным образом.

Меню состояний (раскрывающееся меню)

Выберите состояние, для которого хотите создать стиль, из раскрывающегося меню. Теперь любые изменения, сделанные вами на панели «Стиль», будут сохранены для выбранного состояния.

Состояние None

Состояние None является состоянием элементов по умолчанию. Так элемент выглядит по умолчанию.

После выбора и стиля другого состояния можно вернуться к стилю состояния по умолчанию, выбрав «нет» в раскрывающемся меню «Состояния».

Состояние наведения

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

Нажатое состояние

Нажатое или активное состояние — это состояние, которое отображается, когда вы щелкаете или нажимаете на элемент. Это состояние наследует стили от состояния наведения, поскольку нажатие на самом деле является состоянием состояния наведения.

Состояние фокусировки

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

Состояние фокуса (клавиатура)

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

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

Посещенное состояние

Посещенное состояние — это состояние посещенной ссылки. Это состояние наследует стили от состояния none.

Для состояния "посещено" можно задать стиль только для цвета текста, цвета фона и цвета границы. Цвет фона появится только в том случае, если он уже установлен в другом состоянии.

Заполнитель

Это состояние будет доступно в раскрывающемся меню «Состояния» для полей формы. Это позволяет вам стилизовать текст-заполнитель отдельно от печатного текста, который наследует типографский стиль состояния по умолчанию.

Для текста-заполнителя можно стилизовать типографику, фон и тени.

Выберите поле ввода в форме и откройте раскрывающееся меню «Состояния» в селекторе, чтобы задать стиль заполнителя.

Состояние Checked

Это состояние будет доступно в раскрывающемся меню «Состояния» для флажков формы и переключателей, для которых в настройках элемента включен пользовательский стиль. Это позволяет вам стилизовать проверенное состояние флажка или переключателя.

Возврат к стилизации состояния по умолчанию

Когда вы закончите стилизацию своих состояний, вы можете вернуться к состоянию по умолчанию «Нет», выполнив любое из следующих действий:

Выберите «Нет» в раскрывающемся меню «Состояния»
Нажмите ESC на клавиатуре (это также отменяет выбор текущего элемента)
Выбрать другой элемент

Удалить стиль элемента в состоянии

Чтобы удалить пользовательский стиль или все стили из состояния:

Выберите элемент
Выберите состояние из раскрывающегося меню «Состояния»
Удалить все стили (выделены синим цветом)

Стиль текущего состояния элементов ссылок и вкладок

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

Текущее состояние (зеленая метка в селекторе)

Текущее состояние автоматически добавляется к тегу Все ссылки или классу выбранного элемента ссылки, когда этот элемент связан с текущей страницей, разделом или вкладкой.

Текущее состояние наследует все стили из состояния по умолчанию «Нет».

Выбор текущего состояния ссылки

Чтобы получить доступ к текущему состоянию любого блока ссылок, текстовой ссылки, кнопки, навигационной ссылки:

Выберите элемент ссылки и нажмите D, чтобы открыть настройки ссылки
Выберите параметр страницы и выберите текущую страницу из раскрывающегося списка (если ваша ссылка находится на главной странице, выберите домашнюю страницу)
Нажмите S, чтобы перейти на панель стилей. Вы увидите, что текущее состояние зеленого цвета активировано в поле селектора, если вы применили класс к своей ссылке. Если нет, щелкните в селекторе и выберите тег «Все ссылки» в раскрывающемся списке. Текущее состояние также будет применено к тегу.

Вы также можете выбрать вариант раздела страницы в настройках ссылки. Текущее состояние появится в поле выбора для этого элемента при прокрутке до этого раздела страницы. Это полезно для стилизации кнопок или ссылок, которые фиксируются при прокрутке.

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

Выбор текущего состояния вкладки

Вы можете изменить стиль текущей вкладки по сравнению с обычной вкладкой, чтобы различать активные и неактивные вкладки. Например, вы можете отредактировать цвет шрифта и цвет фона, чтобы они отличались от обычной вкладки.

Для оформления текущей вкладки:

Выберите активную ссылку на вкладку
Назначьте ей класс. Текущее состояние появится автоматически.
Удалить стиль

Стилизация состояния ссылки по умолчанию, когда индикатор текущего состояния отображается в селекторе

Существует несколько способов удалить текущее состояние, если вы хотите изменить состояние по умолчанию. Самый быстрый способ сделать это — выбрать базовый класс по умолчанию в меню «Наследование».

Кроме того, вы можете временно удалить настройку ссылки на панели настроек элемента, задать стиль для класса ссылки, а затем повторно настроить настройку ссылки. Если вы не хотите удалять параметр ссылки, продублируйте элемент ссылки, удалите параметр ссылки на дублирующемся элементе, отредактируйте класс, а затем удалите повторяющийся элемент, когда закончите.

Понять, где стили наследуются от

Все состояния наследуют стили от состояния «нет». «Нажато» также наследует стили от состояния «зависания». Вы можете увидеть, откуда наследуются стили, щелкнув индикатор наследования прямо над полем выбора.

После добавления стилей в состояние значок раскрывающегося меню состояний станет синим. И когда вы откроете раскрывающееся меню «Состояния», вы увидите синие круги, указывающие на то, что в этом состоянии есть локальные стили.

Был ли этот урок полезен? Дайте нам знать!

Спасибо за отзыв! Это поможет нам улучшить наш контент.

Свяжитесь с нашим сообществом

Свяжитесь со службой поддержки

Что-то пошло не так при отправке формы.

Связаться со службой поддержки

У вас есть предложение по уроку? Дайте нам знать

Спасибо! Ваша заявка принята!

Ой! Что-то пошло не так при отправке формы.

Когда применяются псевдоклассы :hover, :focus и :active?

Когда мы выбираем элемент по его .class или #id , мы используем предопределенные и неизменяемые атрибуты, которые встроены в DOM. С помощью псевдоклассов мы можем выбирать элементы, используя информацию, которой еще нет в DOM, и можем изменяться в зависимости от того, как пользователь взаимодействует со страницей.

:hover , :focus и :active — это псевдоклассы, определяемые действиями пользователя. Каждый из них соответствует очень конкретной точке взаимодействия пользователя с элементом на странице, таким как ссылка, кнопка или поле ввода.

При том разнообразии устройств ввода, которые мы имеем сегодня, эти псевдоклассы также ведут себя немного по-разному в зависимости от того, взаимодействует ли пользователь с элементом с помощью мыши 🐭, клавиатуры ⌨️ или сенсорного экрана 📱, что может затруднить понимание того, как и когда стилизовать эти ситуации.

Когда применяется

:hover

Псевдокласс :hover , также называемый «псевдоклассом наведения указателя», применяется, когда указывающее устройство взаимодействует с элементом, не обязательно активируя его.

Типичным примером этого является наведение мыши 🐭 на элемент. Если вы наведете указатель мыши на кнопку ниже, вы увидите, что она стала желтой.

 кнопка: hover { background-color: #ffdb3a; }

На мобильном устройстве 📱 с любым интерактивным элементом можно совершить только одно действие — нажать на него. Вы можете заметить, что если вы нажмете на кнопку выше, она также изменит цвет, несмотря на то, что вы не «просто» наводите на нее курсор. Это связано с тем, что на мобильных устройствах события, запускающие эти псевдоклассы, могут быть объединены. посмотрим с :focus и :active также псевдоклассы.

Наконец, для пользователей клавиатурных устройств ⌨️ псевдокласс :hover никогда не запускается. Клавиатура не считается «указательным» устройством и поэтому не может применяться к этому псевдоклассу наведения указателя.

Когда применяется

:focus

Псевдокласс :focus применяется, когда элемент находится в состоянии, готовом для взаимодействия, т. е. он имеет фокус устройства ввода. Когда это применимо, это довольно сильно отличается между различными устройствами ввода.

При использовании мыши 🐭 или аналогичного указывающего устройства псевдокласс :focus будет применяться, как только пользователь начнет активировать элемент, и, что важно, он будет продолжать оставаться в фокусе, пока пользователь не активирует другой элемент. Например, если вы нажмете кнопку ниже с помощью мыши, вы заметите, что она становится желтой, как только вы начнете взаимодействие с щелчком. Кнопка вернется в состояние по умолчанию только в том случае, если вы щелкнете где-нибудь еще на странице.

 кнопка: фокус { background-color: #ffdb3a; }

Для пользователей клавиатуры ⌨️ фокусировка на элементе очень похожа на наведение на него курсора мыши. Мне нравится думать о псевдоклассе :focus как о состоянии наведения для клавиатурных устройств, потому что это сигнализирует о подобном намерении взаимодействия.

Для пользователей с сенсорным экраном 📱 псевдокласс :focus применяется, опять же, когда пользователь нажимает на элемент. Однако следует отметить, что это не относится к мобильному браузеру Safari.

Когда

:active применяется

Наконец, псевдокласс :active применяется в период, когда элемент активируется. Например, при использовании мыши 🐭 это будет время между нажатием кнопки мыши и ее отпусканием.

Если вы быстро нажмете кнопку ниже, вы можете не заметить кратковременное изменение цвета, но если вы нажмете и удержите, вы увидите, когда псевдокласс будет применен.

 кнопка: активная {цвет фона: #ffdb3a; }

Псевдокласс :active работает таким же образом для взаимодействия с мышью и клавиатурой ⌨️.

На мобильных устройствах 📱, как и псевдокласс :focus , псевдокласс :active применяется при касании элемента. И опять же, это вообще не применимо в мобильном браузере Safari.

Объединение

:hover , :focus и :active

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

Мы можем проверить это, изменив фон кнопки, только если выполняются все три условия.

 кнопка: наведение: фокус: активный {
  цвет фона: #ffdb3a;
}

Если нажать и удерживать кнопку ниже, она станет желтой. Но если вы щелкнете и удержите указатель мыши, перетащив его, вы увидите, что он теряет цвет.

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

Порядок стилей -

:hover затем :focus затем :active

Из-за того, что эти условия могут и часто применяются одновременно, важен порядок, в котором мы добавляем эти стили.

Допустим, у нас есть следующие стили:

 button:active {
  цвет фона: зеленый;
}
кнопка: фокус {
  цвет фона: синий;
}
кнопка:наведите {
  цвет фона: красный;
}

Будут видны только стили :hover

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

Вот почему важно определять эти стили в том порядке, в котором они обычно происходят, чтобы пользователю было понятно, когда распознается новое взаимодействие. Как правило, пользователь сначала наводит курсор на элемент, затем наводит на него фокус, а затем активирует его. Итак, лучший способ упорядочить стили псевдокласса — это : наведите курсор на , затем : фокус , затем : активируйте .

 кнопка:наведите {
  цвет фона: зеленый;
}
кнопка: фокус {
  цвет фона: синий;
}
кнопка: активная {
  цвет фона: красный;
}

Все стили будут видны

Резюме

Псевдоклассы :hover , :focus и :active позволяют нам стилизовать элементы в ответ на то, как пользователь взаимодействует с ними. В зависимости от используемого устройства эти псевдоклассы становятся активными в разные моменты (или не активируются вообще).

	`: наведение`	`:фокус`	`:активный`
Мышь 🐭	Да	Да	Да
Клавиатура ⌨️	№	Да	Да
Сенсорный экран 📱	Да (по щелчку)	Да* (по щелчку)	Да* (по щелчку)

* Не применимо к мобильному (iOS) Safari

Почему :hover:after действительно, но не :after:hover? Селекторы псевдоклассов и псевдоэлементов CSS

На днях я попытался добавить стиль подчеркивания к элементу при наведении, и это не сработало. Я не осознавал, что стилизую псевдоэлемент, созданный :after . Я предпочел вариант с одним двоеточием :после . Это так же верно, как :: после , жизнь коротка, а я ленивый разработчик. Мой : после: наведите курсор не сработал, и я расстроился.

Устранение неполадок заставило меня задуматься, могу ли я объединить другие псевдоэлементы, такие как ::first-letter и ::first-line ? А если нет, то почему? И почему оба :after и :after в любом случае законны?

В этом посте я кратко расскажу об истории селекторов псевдоэлементов и псевдоклассов CSS, чем они отличаются, как их комбинировать в повседневном использовании и почему я теперь единственный парень :: после .

Почему :after Valid CSS?

Во-первых, давайте немного пробежимся по истории CSS. Впервые я изучил CSS в начале 2010-х, когда CSS 2.1 был «Стандартом», а одиночные двоеточия бродили по земле. В то время как в CSS 1 были указаны селекторы псевдоклассов, такие как :link и :visited , в CSS 2 были введены псевдоэлементы, такие как :before и :after .

В то время меньше внимания уделялось дифференциации между псевдоэлементами и псевдоклассами — они оба использовали синтаксис с одним двоеточием. Именно тогда я совершил ошибку, объединив их в единую концепцию псевдоселектора.

Синтаксис с двумя двоеточиями для псевдоэлементов был введен в CSS Selector 3. Из-за принципа совместимости в Интернете селекторы псевдоэлементов из CSS 2.1, включая :после , :до , :first-line и : первая буква — действительны и сегодня. Однако новые псевдоэлементы, такие как ::selection , не имеют соответствующей версии с одним двоеточием — убедитесь сами, выбрав каждую строку в приведенном ниже примере:

См. перо Без названия Шимин Чжан (@shimin-zhang) на КодПене.

Разница между псевдоклассом и псевдоэлементом

Псевдокласс и псевдоэлемент — это селекторы CSS, которые имеют доступ к информации за пределами того, что предоставляет HTML DOM — отсюда и префикс «псевдо». Возьмите селектор :hover , он должен знать текущее местоположение курсора пользователя.

Хотя псевдоэлементы воздействуют на DOM-подобный объект, они создают чистую конструкцию CSS и фактически не влияют на DOM. У них также есть дополнительное двоеточие для обозначения этой разницы. Тот факт, что ::after element не является фактическим узлом DOM, имеет последствия для доступности, их содержимое не существует для программ чтения с экрана и должно быть только декоративным.

Читатели думают: «А как насчет :disabled и :nth-child() ?» - ты поймал меня. Предыдущие два абзаца не совсем верны, некоторые селекторы псевдоклассов являются скорее «трюками» или «ярлыками» — я бы хотел, чтобы W3C создал для них новое имя, чтобы сделать различие четким.

Повторим, концептуальное различие между ними заключается в том, что селекторы псевдоклассов воздействуют на существующий элемент DOM, используя некоторую внешнюю информацию, в то время как псевдоэлемент создает новый, «на самом деле не существующий» элемент только для механизма рендеринга. 9Псевдоселектор 0041 :visited можно использовать только для выбора существующих элементов привязки. В то время как ::first-line создают элементы, которые иначе не могут существовать с данной структурой DOM — отсюда и название.

Вот пример: псевдоэлемент ::first-line создается путем разделения второго элемента на два, чтобы изменить цвет только его первого слова.

См. перо Без названия Шимин Чжан (@shimin-zhang) на КодПене.

Как комбинировать псевдоклассы с псевдоэлементами

Что знание разницы между псевдоклассами и псевдоэлементами говорит нам об их использовании?

Во-первых, селекторы псевдоклассов воздействуют на элементы и могут быть объединены в цепочку, как и любые настоящие селекторы .class . :visited:hover так же действителен, как .visited. hover .

С другой стороны, селекторы псевдоэлементов нельзя использовать взаимозаменяемо с селектором элемента . Вы не можете связать их. Псевдоэлементы не являются реальными элементами — они не могут быть целью селектора. p::first-line::first-letter недействителен, потому что ::first-line не является реальным элементом DOM. Используйте псевдоэлементы только в конце строки селектора.

Как и во всем, что касается CSS, вышеизложенное не является железным правилом. ::prefix и ::postfix of ::first-letter в настоящее время находятся в черновике редактора в качестве модификаций псевдоэлемента и в конечном итоге могут быть официально включены. Однако эти стеки псевдоэлементов следует рассматривать как исключение, а не правило.

Та же логика применяется при объединении селекторов псевдокласса и псевдоэлемента. Псевдокласс приводит к элементам DOM, поэтому можно добавлять псевдоэлементы — почему p:hover:after является допустимым CSS. Меняем порядок, и мы применяем псевдокласс к несуществующему элементу — почему p:after:hover недействителен.

Боковая панель, если вам понравилась эта статья, поделитесь ею с другими. Если вам это действительно понравилось и вы не хотите пропустить следующее, вы можете зарегистрироваться ниже, чтобы еженедельно получать новые сообщения в свой почтовый ящик.

Вот несколько правил, которые следует помнить, когда в следующий раз вам придется использовать псевдоселекторы:

Правило 1: Псевдоклассы можно использовать как настоящие селекторы .class и использовать свободно. p:hover.class работает.

Правило 2: Псевдоэлементы всегда должны быть в самом конце вашего селектора, они не могут быть объединены в цепочку, потому что они не выбирают настоящие элементы DOM.

Правило 3: Не используйте варианты псевдоэлементов с одним двоеточием — даже если это проще — слишком легко ошибиться, когда они используют один и тот же синтаксис. Кроме того, теперь вы должны помнить, что :после работает, но не :выбор .

Перед тем, как я уйду, вот Code Pen с некоторыми примерами псевдоклассов и псевдоэлементов. Используйте его, чтобы проверить свои знания. Прочитайте CSS для каждого div и посмотрите, соответствует ли его поведение вашим ожиданиям!

См. перо Псевдоэлементы и псевдоселекторы Шимин Чжан (@shimin-zhang) на КодПене.

Если вам понравился этот пост, вам также может быть интересно узнать, как создавать API-интерфейсы стилей с помощью пользовательских свойств CSS или когда вам следует использовать единицу CSS px в 2022 году.

Как решить проблемы с наведением

В какой-то момент веб-разработки вы можете столкнуться с тем, что CSS наведение не работает. Иногда при наведении курсора CSS вас могут запутать. Это неприятно, но вы сможете решить проблему с нужными навыками.

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

Содержание

Как работает свойство псевдокласса Hover в CSS
- – Пример – CSS Hover в действии
Причины неработающего Hover
- 1. Смартфоны – Нет состояния Hover
- 2. Неправильный формат CSS
- 3. Специфика CSS
- 4. Использование !important в CSS
Заключение

Как свойство псевдокласса Hover работает в CSS

Как одно из многих свойств псевдокласса в CSS, селектор наведения позволяет вам стилизовать элементы при наведении на него курсора , это работает практически со всеми элементами. Его синтаксис следующий:

элемент :hover
{
правила CSS;
}

Элемент относится к различным элементам, к которым будет применяться свойство псевдокласса наведения. В то время как :hover указывает браузеру применять правила CSS, когда курсор находится над элементами.

— Пример — CSS Hover в действии

Предположим, вы хотите украсить все элементы

на веб-странице на

добавив оранжевую линию и подчеркивание толщиной 4 пикселя , вы можете легко сделать это в CSS. Однако сначала вам нужно создать HTML-код следующим образом:
Hello World

Чтобы украсить текст при наведении, CSS позволяет сделать это следующим образом:
h4:hover
{
text-decoration: оранжевый 4px подчеркивание надчеркивание;
}
Однако наведение CSS не всегда работает . Он отлично подходит для настольных сред, поддерживающих состояние наведения, но плохо работает на небольших сенсорных экранах, которые его не поддерживают. Как веб-разработчик, в какой-то момент вы столкнетесь с проблемой , используя псевдокласс hover в CSS . Следовательно, у вас будет преимущество, если вы знаете, что вызывает такие проблемы в CSS.
Причины неработающего наведения
Псевдокласс наведения работает, когда пользователь использует курсор для взаимодействия с элементом, не обязательно активируя его. Чтобы активировать его, пользователь должен наведите курсор на элемент. Однако известны случаи, когда свойство hover в CSS не работает должным образом.
К ним относятся:
1. Смартфоны — нет состояния наведения
Обычно псевдокласс наведения не реагирует соответствующим образом на сенсорные экраны . Поведение прокрутки на смартфонах отличается от перетаскивания курсора с помощью мыши. Таким образом, поведение при наведении недоступно на устройствах с сенсорным экраном. Например, если вы создадите кнопку с эффектом наведения на мобильном телефоне, это будет ужасно, так как вашему пользователю, возможно, придется дважды нажать на кнопку, чтобы активировать ее функцию.
В среде рабочего стола состояние наведения может диктовать множество взаимодействий . Хорошим примером является использование наведения, чтобы показать пользователям, что элемент доступен для клика с помощью анимации. Кроме того, вы даже можете использовать наведение для отображения некоторых скрытых дополнительных деталей на рабочем столе.
При создании адаптивного веб-сайта тщательно спланируйте , где и когда использовать свойство hover. На некоторых сенсорных экранах простые ссылки теряют эффект наведения. Это может быть небольшая проблема, которая не влияет на функциональность сайта.
Однако проблема возникает, когда состояние наведения либо показывает, либо скрывает другой элемент посредством видимости или свойств отображения в CSS. Такие эффекты наведения на устройствах iOS изменятся на поведение двойного нажатия, поскольку браузер не может правильно использовать CSS наведения.
Вот почему вам необходимо адаптировать свой дизайн с настольного компьютера к мобильному, чтобы он лучше работал на небольших устройствах.
Решения проблем с наведением на смартфонах
Хотя вы можете использовать наведение на кнопках на рабочем столе, вам необходимо найдите другой способ предоставить пользователям аналогичные отзывы о мобильных телефонах. Вы можете красиво выполнить это, активировав изменение состояния с помощью действия касания/щелчка , что является отличной альтернативой CSS для наведения. В противном случае пользователь может усомниться в том, что действие зарегистрировано, если он не увидит изменения между нажатием и загрузкой страницы.
На мобильных устройствах необходимо заменить мегаменю, активируемые состоянием наведения , на переключаемое меню . Для этого вам нужно использовать значок гамбургера для всего содержимого меню, которое не всегда может быть видно на маленьких экранах. Вот почему вы можете избежать проблем с CSS hover, которые не работают на мобильных устройствах с помощью раскрывающегося меню .
Избегайте показа кнопки «Добавить в корзину» на сайтах электронной коммерции при наведении курсора и сохранения ее на мобильных устройствах. Отлично подходит для отображения призыва к действию в среде рабочего стола, уменьшая беспорядок на веб-странице. Однако перенести этот эффект на мобильные устройства не получится .
Чтобы решить эту проблему на мобильных устройствах для сайтов электронной коммерции, вы можете использовать 2 популярных решения в зависимости от вашего дизайна.
Во-первых, вы можете показать призыв к действию и другие функции, такие как сравнение, на странице сразу под названием продукта и ценой . Во-вторых, вы можете полностью избавиться от призыва к действию и позволить пользователю нажать на изображение продукта, чтобы получить доступ к информации о продукте и цене.
Использование всплывающих подсказок на мобильных устройствах не лучшая идея . Обратите внимание, что в некоторых случаях можно сохранить дизайн рабочего стола на мобильных устройствах, используя тот же значок для отображения всплывающей подсказки. Однако убедитесь, что нажатие активирует всплывающую подсказку вместо состояния наведения.
Если вам не удастся адаптировать всплывающую подсказку к мобильной среде, это может быть проблемой . Кроме того, если у него нет кнопки закрытия, закрытие может стать проблемой. Однако вы можете добавить (X), чтобы пользователи могли контролировать всплывающую подсказку на маленьких экранах.
2. Неверный формат CSS

Чтобы CSS работал, вы должны убедиться, что код CSS соответствует допустимому и читаемому браузерами формату. Например, стиль не будет применяться, если вы не используете правильный селектор при выборе элемента. Когда селектор состоит из разных частей, вам нужно начать с «наибольшего» до «наименьшего», поэтому, если вы напишете его в любом другом порядке, 9Эффект 0027 не применяется.

Кроме того, если вы неправильно написали селектор и хотите применить к нему эффект наведения, вы заметите, что стиль не работает должным образом в любом браузере. Чтобы решить эту проблему, вам нужно просмотреть код наведения CSS, чтобы установить, используете ли вы правильный селектор.

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

Кроме того, убедитесь, что вы используете двоеточие (:) между каждым свойством и его значением и точку с запятой (;) после каждого значения, чтобы браузеры могли читать ваш код CSS.

3. Специфика CSS

В CSS более конкретный селектор имеет тенденцию побеждать менее конкретный селектор.

Пример.

Специфика в действии

Предположим, вы все еще хотите украсить весь текст в тегах

внутри тегов

с помощью надчеркивания и подчеркивания при наведении. Код CSS по умолчанию для оформления тегов

внутри тегов

будет следующим:

h4:hover
{
text-decoration: blue 4px underline overline;
}

Теперь вы можете попробовать переопределить это украшение, чтобы сделать цвет линий оранжевым, а не синим. Для такого улучшения попробуйте использовать короткий селектор, например:

h4: hover
{
text-decoration: orange 4px underline overline;
}

Хотя короткий селектор допустим в CSS, ваш стиль не будет работать в браузере. Вместо этого будет применяться стиль по умолчанию, так как он имеет более конкретный селектор.

4.

Использование правила !important в CSS

Иногда может оказаться проще сделать менее конкретный код в CSS для работы с помощью правила !important . Однако вам лучше сначала использовать более конкретный селектор, имея в виду, что с правилом !important иногда вы получаете быстрое решение.

Тем не менее, включая его не всегда работает . Понять, сработает ли правило !important, может быть непросто. В большинстве случаев вам просто нужно проверить это.

Пример – !important Правило в действии

Предположим, вы все еще хотите переопределить стиль CSS по умолчанию при наведении для тегов

внутри элементов

с помощью короткого селектора. CSS позволяет вам использовать правило !important непосредственно перед тем, как вы прекратите действие правила CSS, чтобы принудительно применить эффекты при наведении, например:

h4:hover
{
text-decoration: оранжевый 4px подчеркивание надчеркивание !важно;
}

Заключение

Готово! Чтобы избежать проблем со свойством hover , убедитесь, что вы учитываете контекст каждого проекта, прежде чем определять функции.

Как при наведении на один элемент hover менять стили другого элемента css

Как повлиять на другие элементы при наведении div

6 ответов

Как при наведении на элемент менять другой?

CSS HOVER изменении свойств одного элемента при наведении курсора на другой

Как при наведении на один объект изменить свойства другого в css

Читайте также

Забавные эффекты для букв

Реализация забавных подсказок

Анимированные буквы

Солнцезащитные очки от первого лица

Каскад и наследование — Изучение веб-разработки

Каскад

Специфичность

Наследование

Контроль наследования

Возврат всех исходных значений свойств

Порядок следования

Специфичность

!important

Css как при наведении на один элемент изменить другой

Css как при наведении на один элемент изменить другой

What can I do to prevent this in the future?

Как при наведении на один элемент (hover) менять стили другого элемента css?

Решение

Работа с эффектами наведения CSS

Выпадающее меню

Другой стиль

Нижняя граница становится фоном

Уменьшение интенсивности цвета

Увеличение ширины и высоты

Вращение элемента

Изменение формы элемента

Изменение цвета границ

Заключение

CSS-селектор :not. Полезные примеры

Пример 1. Элемент без класса

Пример 2. Изменение внешнего вида всех элементов, кроме наведенного

Пример 3. Меню с разделителями между элементами

Пример 4. Debug css

Пример 5. Поля форм

Поддержка

Почему инлайнить стили — плохо — Блог HTML Academy

Почему разработчики предпочитают внешние стили

Когда можно использовать inline-стили?

Как повлиять на другие элементы при наведении курсора на один элемент в CSS?

HTML

HTML

New Media

00 New Media

Учебный сценарий NMD

Зачем менять стиль при наведении?

Предпосылки

Урок

2. Измените стиль с помощью встроенного JavaScript.

3. Измените несколько атрибутов стиля, изменив класс.

4. Измените класс в JavaScript вместо HTML.

0 this.className = '

5. Измените класс каждого блока div с помощью цикла JavaScript.

6. Зачем весь этот JavaScript?

7. Выборочное определение поведения элементов div.

штатов | Webflow University

Стиль элемента в различных состояниях

Меню состояний (раскрывающееся меню)

Возврат к стилизации состояния по умолчанию

Удалить стиль элемента в состоянии

Стиль текущего состояния элементов ссылок и вкладок

Выбор текущего состояния ссылки

Выбор текущего состояния вкладки

Стилизация состояния ссылки по умолчанию, когда индикатор текущего состояния отображается в селекторе

Понять, где стили наследуются от

Спасибо за отзыв! Это поможет нам улучшить наш контент.

Когда применяются псевдоклассы :hover, :focus и :active?

Когда применяется

Когда применяется

Когда

Объединение

Порядок стилей -

Резюме

Почему :hover:after действительно, но не :after:hover? Селекторы псевдоклассов и псевдоэлементов CSS