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

Изменение стиля одного div-блока при наведении мыши на другой div-блок

Имеем главный div-блок с "background: #fff" (div1). Внутри этого блока находятся два других div-блока:
div11 — картинка с фильтром "grayscale: 100%" (черно-белая) и div12 — текст со стилем "display:none" (текст скрыт).

Итого, имеем такую структуру:

Нужно сделать так, чтобы при наведении мыши на главный div1-блок происходило сразу 3 процесса:

  1. Менялся цвет фона в блоке div1.
  2. В блоке div11 фильтр grayscale был равен 0%.
  3. В блоке div12 стиль стал display:block.

Т.е. должно получиться так:

Как это сделать?
Как заставить hover одного блока указывать стиль для других блоков?

Изменить фон div при наведении на другой

Как сделать так, чтобы при наведении на .div11 менялся фон div12. Верстку нельзя менять.

Никак, если использовать только CSS — CSS правила действуют каскадно. Можно лишь через наведение на .div1 , т.к. он на одном уровне с .div2 .

Если через использование скриптов, то, например, вот так:

Даже если строк куда больше (и без JavaScript):

Создание интернет-магазина строительных материалов в ABCname

Подробнее о сайте standart-s.com.ua

  • Почему SERVER_ADDR имеет не тот IP 39004 visits
  • Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 29247 visits
  • Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 13092 visits
  • Blob video url download 9468 visits
  • Как через css изменить цвет png изображения? 9152 visits
  • Php curl запрос через прокси с авторизацией 8709 visits
  • Работа с captcha vk api 7603 visits

Не срабатывает hover

Не срабатывает hover

Есть следующий код:

Можно ли реализовать fancybox под один размер картинки?

Можно ли реализовать fancybox под один размер картинки?

Есть миниатюра картинки, которая должна раскрываться в полном размере с помощью библиотеки fancyboxВопрос: можно ли для этого играться только.

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

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

Есть 5 блоков, 4 играют роль фона, а пятый как объектКак реализовать чтобы при наведении на блок заставить двигаться пятый блок?

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

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

У меня есть следующее HTML:

Мне нужно изменить background-color из elementA , когда мы наведем курсор на elementC . Я перепробовал много примеров CSS, но безуспешно.

Как я могу это сделать, просто используя CSS? Нет JavaScript или JQuery.

28 марта 2014 в 09:05

5 ответов
  • Как стилизовать родительский элемент при наведении курсора на дочерний элемент?

Я знаю , что не существует родительского селектора CSS, но можно ли стилизовать родительский элемент при наведении курсора на дочерний элемент без такого селектора? Чтобы привести пример: рассмотрим кнопку удаления , которая при наведении курсора выделит элемент, который вот-вот будет удален:…

Я хочу, чтобы при наведении курсора на элемент (поле, сделанное с css) background color тела менялось с одного цвета на другой, например с белого на красный. Проблема в том, что это должно быть сделано только с помощью css и без javascript. И если javascript должен быть обязательно использован, то…

Вы не можете выбрать sibling , который находится перед selector .

Однако есть 2 возможных решения: либо сделать это с помощью Javascript , либо вы можете просто переупорядочить свои элементы в позиции, которая позволяет вам выбрать, а затем снова переупорядочить их позиции, установив Position: Absolute;

28 марта 2014 в 09:35

это можно сделать только с CSS, хотя есть некоторые ограничения, которые могут помешать вам использовать его. Я переместил :hover к родителю и выключил pointer-events на elementB. К сожалению, это означает, что для IE потребуется IE11+. Chrome и Firefox уже имеют хорошую поддержку. Мне также пришлось сбросить background-color на elementA, иначе цвет также изменяется при наведении курсора на elementA. Наконец, ваши markup и другие CSS на вашей реальной странице могут отличаться, что также может помешать этому быть хорошим решением.

Я не могу придумать другого способа сделать это в CSS, поэтому, если это не соответствует вашим требованиям, то JavaScript-единственное решение.

Демонстрация

HTML

CSS

28 марта 2014 в 09:41

Если вы хотите сделать это простым CSS, это будет трудно, но не невозможно. Вы можете играть с поплавками (горизонтальными) или, возможно, более динамичными, абсолютными элементами. Конечно, вам нужно иметь известную ширину/высоту, чтобы элементы располагались правильно.

CSS (без значений позиции).

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

28 марта 2014 в 09:14

    CSS наведите курсор мыши на элемент A, но css воздействует на элемент B

У меня есть элемент класса B, который имеет следующее css .B < display:none; >и элемент класса А, который имеет ниже css при наведении курсора мыши A:hover .Б < display:block; >эффект css, которого я хочу достичь, заключается в том, что при наведении курсора на элемент класса А появится элемент&#8230;

Я пытаюсь сделать div, в котором размер значка шрифта масштабируется при наведении курсора на весь div, а не только на конкретный значок. Что-то похожее на: http://fortawesome.github.io/Font-Awesome/icons/ чтобы уточнить, наведение курсора на элемент <li> приводит к масштабированию&#8230;

Да, вы можете сделать только с CSS, но &#8216;elementA&#8217; MUST будет AFTER &#8216;elementC&#8217;
Вот код

А вот документация общего селектора братьев и сестер

28 марта 2014 в 09:09

28 марта 2014 в 09:47

Похожие вопросы:

pure CSS non sass, наведите курсор на один элемент и разверните остальные

Используя чистый CSS. Без SASS. Мне интересно, можно ли написать что-то, что позволяет эффекту наведения (другой элемент немного расширяется в размере) при наведении на другой элемент. Так что в&#8230;

CSS переход &#8212; исчезающий элемент только при наведении курсора мыши

Возможно ли иметь переход css, который затухает элемент при наведении курсора мыши, но просто скрывает элемент, когда мышь уходит? т. е. зависать в = увядает для 0.5 секунд | уберите курсор = не&#8230;

Изменение css свойств родительского элемента при наведении курсора на дочерний элемент

Я пытаюсь изменить свойства родительского элемента при наведении курсора на дочерний элемент. Вот мой HTML <div <div <a href=#&#8230;

Как стилизовать родительский элемент при наведении курсора на дочерний элемент?

Я знаю , что не существует родительского селектора CSS, но можно ли стилизовать родительский элемент при наведении курсора на дочерний элемент без такого селектора? Чтобы привести пример: рассмотрим&#8230;

Измените body bgcolor при наведении div, используя только CSS

Я хочу, чтобы при наведении курсора на элемент (поле, сделанное с css) background color тела менялось с одного цвета на другой, например с белого на красный. Проблема в том, что это должно быть&#8230;

CSS наведите курсор мыши на элемент A, но css воздействует на элемент B

У меня есть элемент класса B, который имеет следующее css .B < display:none; >и элемент класса А, который имеет ниже css при наведении курсора мыши A:hover .Б < display:block; >эффект css, которого&#8230;

Масштабировать размер значка шрифта при наведении курсора на div, используя только css?

Я пытаюсь сделать div, в котором размер значка шрифта масштабируется при наведении курсора на весь div, а не только на конкретный значок. Что-то похожее на:&#8230;

Как обрабатывать наведение курсора на другой элемент и изменять изображения другого элемента только на css

Как обрабатывать наведение курсора на другой элемент и изменять изображения другого элемента только на css Например, представьте, что изображение используется в качестве фона в i, что нам нужно&#8230;

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

У меня есть довольно простой вопрос для разработчика jQuery. Я пытаюсь изменить атрибут CSS для элемента при наведении курсора мыши на другой элемент на странице. Я собрал fiddle для обзора, мне&#8230;

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

У меня проблема с моим CSS. Я хочу изменить элемент при наведении курсора на другой элемент. Это работает, но не идеально. Мой код: HTML <ul navbar-nav navbar-right> <li&#8230;

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

Большое спасибо Майку и Роберту за их полезные посты!

Если у вас есть два элемента в вашем HTML, и вы хотите :hover более одного и нацелены на изменение стиля в другом, эти два элемента должны быть напрямую связаны &#8212; родители, дети или братья и сестры. Это означает, что оба элемента должны быть либо внутри другого, либо оба должны содержаться в одном и том же элементе большего размера.

Я хотел, чтобы определения отображались в рамке справа от браузера, когда мои пользователи читали мой сайт и пересекались с :hover выделенными терминами; поэтому я не хотел, чтобы элемент &#8216;definition&#8217; отображался внутри элемента &#8216;text&#8217;.

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

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

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

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

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

есть id=»Block»
. Когда речь идет о классе class=»Block»
используют точку div.Block:hover
.

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

Синтаксис применения псевдоклассов следующий.

Вначале указывается селектор, к которому добавляется псевдокласс, затем следует
двоеточие, после которого идёт имя псевдокласса. Допускается применять псевдоклассы
к именам идентификаторов или классов (A.menu:hover
green>
), а также к контекстным селекторам (.menu A:hover

). Если псевдокласс указывается без селектора впереди (:hover
), то он будет применяться ко всем элементам документа.

Условно все псевдоклассы делятся на три группы:

  • определяющие состояние элементов;
  • имеющие отношение к дереву элементов;
  • указывающие язык текста.

Псевдоклассы, определяющие состояние элементов

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

:active

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

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

Запись A <&#8230;>
и A:link
<&#8230;>
по своему результату равноценна, поскольку в браузере даёт один
и тот же эффект, поэтому псевдокласс :link
можно
не указывать. Исключением являются , на них действие :link
не распространяется.

:focus

Применяется к элементу при получении им фокуса. Например, для текстового поля
формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры
можно вводить в него текст (пример 15.1).

Пример 15.1. Применение псевдокласса:focus

Результат примера показан ниже (рис. 15.1). Во второй строке находится курсор, поэтому текстовое поле получило фокус.

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

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

:hover

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

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

Пример 15.2. Изменение цвета ссылок

Результат примера показан на рис. 15.2.

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

Селекторы могут содержать более одного псевдокласса, которые перечисляются подряд через двоеточие, но только в том случае, если их действия не противоречат друг другу. Так, запись A:visited:hover
является корректной, а запись A:link:visited
&#8212; нет. Впрочем, если подходить формально, то валидатор CSS считает правильным любое сочетание псевдоклассов.

Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы :active
и :hover
только
для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере работают и для других элементов.

Псевдокласс :hover
не обязательно должен применяться к ссылкам, его можно добавлять и к другим элементам документа. Так, в примере 15.3 показана таблица, строки которой меняют свой цвет при наведении
на них курсора мыши. Это достигается за счёт добавления псевдокласса :hover
к селектору TR
.

Пример 15.3. Выделение строк таблицы

Пики Трефы Бубны Червы
Чебурашка 5 2 4 2
Крокодил Гена 2 7 1 3
Шапокляк 5 4 3 1
Крыса Лариса 1 0 5 7

Результат примера показан ниже (рис. 15.3).

Псевдоклассы, имеющие отношение к дереву документа

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

:first-child

Применяется к первому дочернему элементу селектора, который расположен в дереве
элементов документа. Чтобы стало понятно, о чем речь, разберём небольшой код
(пример 15.4).

Пример 15.4. Использование псевдокласса:first-child

Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh euismod tincidunt
ut lacreet dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud
exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat
.

Результат примера показан ниже (рис. 15.4).

Рис. 15.4. Использование псевдокласса:first-child

В данном примере псевдокласс :first-child
добавляется
к селектору B
и устанавливает для него красный цвет
текста. Хотя контейнер
встречается в первом
абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е.
текст «Lorem ipsum». В остальных случаях содержимое контейнера

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

Браузер Internet Explorer поддерживает псевдокласс :first-child
начиная с версии 7.0.

Псевдокласс :first-child
удобнее всего использовать
в тех случаях, когда требуется задать разный стиль для первого и остальных однотипных
элементов. Например, в некоторых случаях красную строку для первого абзаца
текста не устанавливают, а для остальных абзацев добавляют отступ первой строки.
С этой целью применяют свойство text-indent
с нужным
значением отступа. Но чтобы изменить стиль первого абзаца и убрать для него
отступ потребуется воспользоваться псевдоклассом :first-child
(пример 15.5).

Пример 15.5. Отступы для абзаца

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

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

Но однажды в город вновь вошел незнакомец. Он хромал на левую ногу.

Результат примера показан ниже (рис. 15.5).

Рис. 15.5. Изменение стиля первого абзаца

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

Псевдоклассы, задающие язык текста

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

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

В качестве языка могут выступать следующие значения: ru &#8212; русский; en &#8212; английский; de &#8212; немецкий; fr &#8212; французский; it &#8212; итальянский.

Пример 15.6. Вид кавычек в зависимости от языка

Цитата на французском языке: Ce que femme veut,
Dieu le veut .

Цитата на немецком: Der Mensch, versuche die Gotter nicht .

Цитата на английском: То be or not to be .

Результат данного примера показан на рис. 15.6. Для отображения типовых кавычек в примере используется стилевое свойство quotes
, а само переключение языка и соответствующего вида кавычек происходит через атрибут lang
, добавляемый к тегу
.

Вопросы для проверки

  1. Код CSS не валидный.
  2. К селектору A не добавлен псевдокласс:link.
  3. Псевдокласс:visited стоит после:hover.
  4. Псевдокласс:active стоит после:visited.
  5. Неверное значение свойства color у A:hover.

2. Требуется выделить фоновым цветом первую строку таблицы. Какой псевдокласс для этой цели подойдёт?

  1. :active
  2. :first-child
  3. :focus
  4. :hover
  5. :lang

3. К каким элементам добавляет стиль следующая конструкция &#8212; A:link:visited:hover ?

  1. К непосещённым ссылкам.
  2. К посещённым ссылкам.
  3. К любым ссылкам при наведении на них курсора мыши.
  4. К посещённым ссылкам при наведении на них курсора мыши.
  5. Ни к одному элементу.

Ответы

1. Псевдокласс:visited стоит после:hover.

3. Ни к одному элементу.

hover — Русский — it-swarm.com.ru

hover — Русский — it-swarm.com.ru

Как: добавить / удалить класс для mouseOver / mouseOut &#8212; JQuery .hover?

Смещение встроенных элементов при выделении жирным шрифтом при наведении

Цвет фона div, чтобы изменить его

Использование JQuery наведите курсор на HTML-карту изображения

Как использовать &#171;парить&#187; в CSS

Как отладить CSS / Javascript при наведении

Как сказать .hover () ждать?

CSS: Hover один элемент, эффект для нескольких элементов?

Установите: hover в зависимости от класса

CSS непрозрачность при наведении div

Почему при наведении мыши на строки таблицы не работает CSS, когда ячейки внутри строк имеют имена классов?

Css hover работает на мобильных устройствах?

Объединить функции наведения и нажатия (jQuery)?

Как имитировать зависание в браузерах с сенсорным экраном?

при зависании на iPad/iPhone пользователь дважды щелкает ссылку

задержка () или таймаут с остановкой ()?

Как я могу изменить цвет кнопки при наведении курсора?

Можете ли вы сделать зависшее состояние в Firebug &#171;липким&#187;?

Наведите, наведите курсор мыши и мышь

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

См .: состояние при наведении в Chrome Инструменты разработчика

Можете ли вы применить эффект наведения CSS на элемент, который не является дочерним элементом для элемента hovered?

iOS автоматическое исправление зависания?

Исчезает ли эффект при наведении ссылки?

Различия между CSS3: hover и: focus?

Эффекты наведения не работают с IE8

: hover не работает должным образом в IE9

Можно ли изменить только альфа цвета фона RGBA при наведении курсора?

CSS: после перехода

CSS: установил флажок, чтобы он выглядел как кнопка, есть ли указатель мыши?

Проверка состояния Jquery (&#8216;: hover&#8217;) не работает

Отключить эффекты наведения на мобильные браузеры

Как я могу отложить эффект: hover в CSS?

Селектор CSS при наведении на фоновый цвет не работает после динамического изменения цвета фона с помощью jquery

div hover изменение цвета фона?

Изменить изображение при наведении

Как сделать с помощью Twitter начальные вкладки при наведении курсора вместо нажатия?

Как сделать так, чтобы изображение висело в css?

Использование: hover, чтобы изменить CSS другого класса?

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

Как изменить цвет ссылки в определенном классе для CSS CSS

Что противоположно: hover (при отпускании мыши)?

Добавляйте текст при наведении курсора без javascript, как мы наводим на репутацию пользователя

показать/скрыть div при наведении курсора

CSS: навести курсор на другой элемент?

Строка подсветки таблицы HTML при наведении, кроме первой строки (заголовок)

Разверните/уменьшите div при наведении/уменьшении с помощью jQuery

изображение движется при наведении &#8212; проблема непрозрачности хрома

css: избегать парения изображения при первом мигании

jQuery: вызвать событие наведения мыши из другого элемента

Как показать текст на картинке при наведении?

CSS :: child установлен для изменения цвета при наведении на родительский элемент, но также изменяется и при наведении

Как изменить свойство CSS с помощью JavaScript

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

Проверить элемент наведения в Chrome?

Эффект перехода CSS делает изображение размытым/перемещает изображение на 1 пиксель в Chrome?

.is (&#171;: hover&#187;) не работает с jQuery 1.9 Как исправить

Как предотвратить эффект зависания кнопок на сенсорных устройствах

Исправить наведение CSS на iPhone/iPad/iPod

CSS при наведении мыши показать еще один элемент

Изменение изображения при наведении курсора с помощью CSS / HTML

Использование CSS для переноса свойства fill пути SVG при наведении

простой Jquery наведите увеличить

Как переключить класс, используя чистый JavaScript в HTML

Bootstrap Наведение строки таблицы

Как отобразить и скрыть div с CSS?

Как сделать в CSS наложение поверх изображения?

CSS фоновое изменение размера изображения

Вращение или поворот изображения при наведении

jQuery Datepicker &#8212; Получить дату при наведении

Как удалить/игнорировать: наведите курсор на стиль css на сенсорных устройствах

Граница CSS-изображения светится при наведении на индивидуальный цвет

CSS отключить эффект наведения

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

Как изменить цвет ссылки и цвет при наведении в Bootstrap версии 4?

CSS: зависание не работает на iOS Safari и Chrome

Как исправить размытое изображение в масштабе трансформации

Как добавить всплывающую подсказку к изображению при наведении курсора с помощью CSS

Angular 2 Событие при наведении

Медиа-запрос для устройств, поддерживающих зависание

Как отключить эффект наведения кнопки Material-UI внутри стилизованного компонента

Как создать выпадающее подменю при наведении в Bootstrap 4.1?

Content dated before 2011-04-08 (UTC) is licensed under CC BY-SA 2.5. Content dated from 2011-04-08 up to but not including 2018-05-02 (UTC) is licensed under CC BY-SA 3.0. Content dated on or after 2018-05-02 (UTC) is licensed under CC BY-SA 4.0. | Privacy

CSS &#8212; :hover &#8212; :hover CSS псевдо-класс совпадения , когда пользователь взаимодействует с элемен

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

Стили , определенные :active псевдо-класс будут переопределены любым последующим ссылкой , связанной с псевдо-классом ( :link , :visited , или :active ) , который имеет , по меньшей мере , равную специфичность. Для ссылок стиля надлежащим образом , поставить :hover правило после :link и :visited правила , но до :active один, как определено LVHA порядка : :link &#8212; :visited &#8212; :hover &#8212; :active .

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

Syntax

Examples

Основной пример
Result
Галерея изображений

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

Примечание. Аналогичный эффект, но основанный на псевдоклассе :checked (применяется к скрытым радиобоксам), см. В этой демонстрации , взятой со страницы ссылок : checked .

Specifications

Совместимость с браузерами

См.также

React &#8212; пишем CSS в Javascript

Каждый фронтендщик каждый день пишет CSS. А CSS, как известно имеет много проблем, которые хотелось бы решить.

Проблема №1: Все стили в CSS глобальные. Если вы обьявили класс .container с какими то свойствами и Петя завтра сделал на вашем проекте тоже самое, то какие стили применятся? Ваши или Петины? Естественно, что глобальные стили это плохо и люди придумывают костыли в виде BEMa, например. Кто не работал с BEM &#8212; это когда вы создаете какой-то класс например .authentication и все стили дочерних классов вкладываете внутрь с префиксом authentication. Получается такой себе уникальный компонент, который можно реюзать. Это большой костыль, который еще и подают в виде методологии, которую нужно изучать. Все стили с BEM так и остаются глобальными и их можно переопределить. Мы же хотим писать классы и не думать о том, что они могут повториться, так как они должны быть уникальные.

Проблема №2: Мы имеем елемент у которого прописаны какие-то стили. И мы хотим в другом месте эти стили перекрыть. Обычно люди вкладывают елемент у которого они хотят переопределить стили в другой елемент и, так как вес селектора становится больше, то стили переопределяются. В большом проекте это слабо похоже на лаконичный код. Мы же хотим, чтобы переопределить стили можно было не в css, а до того, как css сбилдился. То есть чтобы на странице в css мы видели чистый и лаконичный код без переопределений.

Проблема №3: Мы хотим избавиться от important раз и навсегда.

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

Я использую библиотеку aphrodite, которую создали в Khan Academy и которая отлично работает как без реакта так и с react.

Итак у меня проект, который я сгенерировал с помощью create-react-app.

Давайте установим aphrodite.

Теперь импортируем функцию css из aphrodite.

Все наши стили компонента App мы будем держать в файле AppStyles. Давай импортируем StyleSheet и добавим класс container.

Все стили, которые пишуться через тире будут писаться camelCase, а все значения строками.
Как теперь использовать этот класс container в App компоненте?

Мы просто в className передаем функцию css с параметром класса, который хотим применить.

Давайте посмотрим в браузер что у нас вышло. Как мы видим, наши стили применились. Наш контейнер теперь уникальный так как к нему добавился сгенерированный постфикс. Теперь даже если в другом месте кто-то использует класс container, то он тоже будет уникальный. Но почему же наш стиль написан с important? Потому что для более легкого перехода на aphrodite с проекта, который написан на обычном css все свойства добавляются автоматом с important. В этом нет ничего плохого, так как он просто сделан для перекрытия css стилей, но давайте его все таки уберем, так как у нас новый проект и нам он не нужен

Для этого просто вместо импорта из aphrodite будем импортить из aphrodite/no-important

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

Что еще нам дает aphrodite? Например autoprefixer. Давайте попробуем. Давайте нашему классу container добавим display:flex

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

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

Давайте создадим файл squareStyles, который будет нашим шаред классом.

Это обычный обьект с стилями. Ничего больше. Даже aphrodite мы не применяли. Теперь давайте выведем его в App.

Мы просто добавили еще один класс из стилей App.

Теперь давайте импортируем blackSquare в стили App и подмешаем все стили из blackSquare с помощью spread из ES7.

Если мы посмотрим в браузер, то у нас вывелся черный квадрат. Теперь представим, что в всех местах он нам нужен 100&#215;100, а именно в App 50&#215;50.

Давайте просто перекроем стили в square.

В браузере мы видим, что ширина и высота квадрата изменились. Давайте посмотрим на стили. Так как все стили у нас генерируются, то в браузере мы видим только результирующие стили. То есть ширина и высота задается только 1 раз. Никаких перекрытий стили по 20 раз с разным весом селекторов. Только один уникальный стиль.

Итак в этом уроке мы разобрали, почему писать css в javascript лучше и проще. Вам не нужно думать, что стили будут не уникальные или думать как перекрыть стили. Вы также никогда не будете писать important.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

Как изменить курсор при наведении мыши в CSS

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

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

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

Представим вам следующие методы контролирования курсора:

  • Как сделать курсор в виде руки при наведении мыши на элемент списка
  • Как изменить курсор гиперссылки при наведении мыши
  • Как установить изображение для курсора
  • Пример со всеми видами маркеров

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

Если хотите изменить указатель мыши, чтобы он стал в форме руки при наведении мыши на элемент списка, можно установить класс для элемента списка (<li>) и установить стиль только для него. Но если необходимо установить указатель в форме руки для всех элементов списка, просто установите стиль для элемента <li>.

Код будет иметь следующий вид, если хотите установить курсор в виде указателя:

Давайте рассмотрим пример вышеуказанного метода:

Пример¶

Другой пример, где меняется курсор-указатель. Здесь мы используем селектор :nth-child вместе с nth-child(odd) как cursor: progress и nth-child(even) как cursor: pointer для отдельных типов курсора на разных элементах.

Пример¶

Известно, что курсор по умолчанию для гиперссылки устанавливается как &#171;pointer&#187;. Если хотите изменить его, нужно указать тип курсора для элемента <a> с помощью CSS селектора :hover.

Чтобы изменить &#171;pointer&#187; в &#171;default&#187;, вам понадобится эта часть кода:

Смотрите следующий пример:

Пример¶

Так как ссылки имеют color: blue и text-decoration: underline по умолчанию, рекомендуется изменить цвет и продолжить работу с гиперссылками.

Смотрите статью Как изменить цвет ссылки с помощью CSS.

Как установить изображение для курсора¶

Давайте научимся, как еще можно работать с курсором! Можно также установить выбранное вами изображение как курсор на вашей веб-странице.

После этой части кода установите свойство cursor как image:

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

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

Пример¶

Рассмотрим другой пример, где использованы иконки. Можете использовать их из веб-страниц, где возможно применить код Base64, просто вставляя этот код в URL значение курсора. Или можно загрузить иконку на вашу веб-страницу и использовать URL для установления курсора.

Пример¶

Пример со всеми видами курсора¶

Здесь увидите пример, который содержит все возможные виды курсора.

Для значений &#171;zoom-in&#187;, &#171;zoom-out&#187;, &#171;grab&#187; и &#171;grabbing&#187; добавляется расширение -webkit-.

Пример¶

html &#8212; Как повлиять на другие элементы при зависании одного элемента

Большое спасибо Майку и Роберту за их полезные посты!

Если у вас есть два элемента в вашем HTML и вы хотите : наведите указатель на один и нацельтесь на изменение стиля в другом, два элемента должны быть напрямую связаны &#8212; родители, дети или братья и сестры. Это означает, что два элемента либо должны находиться один внутри другого, либо оба должны содержаться в одном и том же более крупном элементе.

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

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

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

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

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

при наведении CSS, изменить цвет другого элемента

при наведении курсора CSS, изменить цвет другого элемента &#8212; qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил
5 лет, 4 месяца назад

Просмотрено
6к раз

На этот вопрос уже есть ответы :

Закрыт 5 лет назад.

У меня есть элемент с именем класса &#171;example&#187;, когда я наведен на этот элемент, я хочу изменить другой элемент с именем класса &#171;example-title&#187;, который находится под этим элементом, на белый цвет. Как мне это сделать с помощью sass / css?

19.4k5151 золотой знак6565 серебряных знаков8686 бронзовых знаков

Коричневый A Коричневый A

85933 золотых знака1313 серебряных знаков2121 бронзовый знак

Используйте соседний селектор сестры + :

Создан 24 марта &#8217;16 в 23: 192016-03-24 23:19

1k2828 золотых знаков236236 серебряных знаков

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

Посмотреть эту скрипку

Создан 24 марта &#8217;16 в 23: 232016-03-24 23:23

Винсент Джи Винсент Джи

1,955 11 золотой знак1616 серебряных знаков3131 бронзовый знак

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками css или задайте свой вопрос.

Stack Overflow лучше всего работает с включенным JavaScript

Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie

Отображение элемента div при наведении курсора на тег с помощью CSS

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

Чтобы отобразить элемент div с помощью CSS при наведении на тег:

  • Сначала установите элемент div невидимым, т.е. display: none ;.
  • Во-вторых, используя соседний родственный селектор и наведите указатель мыши на тег, чтобы отобразить элемент div.

Пример: В этом примере показано, как отображать элемент div при наведении на тег.

Добавить комментарий

Ваш адрес email не будет опубликован.