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

Содержание

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

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

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

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

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

html

css

Поделиться

Источник


Ted    

28 марта 2014 в 09:05

5 ответов

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

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

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

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


2

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

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

Поделиться


Explisam    

28 марта 2014 в 09:35


2

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

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

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

HTML

<div>
   <div>A</div>
   <div>B</div>
   <div>C</div>
</div>

CSS

.wrapper:hover .elementA {
    background-color:red;
}

div {
    width:20px;
    height:20px;
}

.wrapper div {
    border:1px dashed lightskyblue;
}

.elementB {
    pointer-events:none;
}

.wrapper .elementA:hover {
    background-color:white;
}

Поделиться


andyb    

28 марта 2014 в 09:41


1

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

HTML:

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

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

.wrapper {
    position:relative;
}

.wrapper>div {
    position:absolute;
}

.elementC:hover+.elementA {
    background-color:#333;
}

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

Поделиться


user3360311    

28 марта 2014 в 09:14

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

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

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

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


0

Да, вы можете сделать только с CSS, но ‘elementA’ MUST будет AFTER ‘elementC’
Вот код

.elementC:hover ~ .elementA {
    color: #ccc /* example */
}

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

Поделиться


AndrePliz    

28 марта 2014 в 09:09


0

wrapper{ background:black;}

.elementA {
    display: block;
    width: 100%; background:blue;
    height: 50px;
}

.elementB {
    display: block;
    color: #ffffff;
    background-color:red;
    text-align: center;
    width:100%;
    padding: 10px;
}


.elementC {
    display: block;
    color: #ffffff;
    background-color:pink;
    text-align: center;
    width:100%;
    padding: 10px;
}

.elementA:hover + .elementC + .elementB {
    display: block;
    background:green;
}

Поделиться


Laukik Patel    

28 марта 2014 в 09:47

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

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

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

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

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

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

Я пытаюсь изменить свойства родительского элемента при наведении курсора на дочерний элемент. Вот мой HTML <div class=social-icons> <div class = innerSocialDiv> <a href=#…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML:

<div> /*Common parent*/

  <a href="http://en.wikipedia.or/wiki/Light">Light                            /*highlighted term in text*/
  </a> is as ubiquitous as it is mysterious. /*plain text*/

  <div> /*Container for :hover-displayed definitions*/
    <p> /*example definition entry*/ Light:
      <br/>Short Answer: The type of energy you see
    </p>
  </div>

</div>

CSS:

/*read: "when user hovers over #light somewhere inside #explainBox
    set display to inline-block for #light directly inside of #definitions.*/

#explainBox #light:hover~#definitions>#light {
  display: inline-block;
}

.def {
  display: none;
}

#definitions {
  background-color: black;
  position: fixed;
  /*position attribute*/
  top: 5em;
  /*position attribute*/
  right: 2em;
  /*position attribute*/
  width: 20em;
  height: 30em;
  border: 1px solid orange;
  border-radius: 12px;
  padding: 10px;
}

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

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

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

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

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

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

Селектор:Псевдокласс { Описание правил стиля }

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

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

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

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

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

:active

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

:link

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

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

:focus

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

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

HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx

Псевдоклассы

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

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

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

:hover

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

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

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

HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx

Псевдоклассы

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

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

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

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

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

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

HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx

Псевдоклассы

ПикиТрефыБубныЧервы
Чебурашка5242
Крокодил Гена2713
Шапокляк5431
Крыса Лариса1057

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

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

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

:first-child

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

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

HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx

Псевдоклассы

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. Отступы для абзаца

HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx

Псевдоклассы

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

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

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

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

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

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

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

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

:lang

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

Элемент:lang(язык) { … }

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

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

HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx

lang

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

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

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

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

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

A { color: blue; background: orange; }
A:hover { background: yellow; color: black; }
A:visited { color: white; }
A:active { color: red; }

  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. К каким элементам добавляет стиль следующая конструкция — A:link:visited:hover ?

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

Ответы

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

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

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

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

it-swarm.com.ru

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

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

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

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

Как использовать «парить» в CSS

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

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

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

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

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

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

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

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

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

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

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

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

Можете ли вы сделать зависшее состояние в Firebug «липким»?

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

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

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

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

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

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

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

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

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

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

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

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

Проверка состояния Jquery (‘: hover’) не работает

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

изображение движется при наведении — проблема непрозрачности хрома

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

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

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

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

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

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

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

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

.is («: hover») не работает с jQuery 1.9 Как исправить

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

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

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

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

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

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

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

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

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

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

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

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

jQuery Datepicker — Получить дату при наведении

Как удалить/игнорировать: наведите курсор на стиль 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 — :hover — :hover CSS псевдо-класс совпадения , когда пользователь взаимодействует с элемен

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

a:hover {
  color: orange;
}

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

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

Syntax

:hover

Examples

Основной пример

HTML
<a href="#">Try hovering over this link.</a>
CSS
a {
  background-color: powderblue;
  transition: background-color .5s;
}

a:hover {
  background-color: gold;
}
Result

Галерея изображений

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

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

Specifications

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

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidХромовый AndroidFirefox для AndroidОпера АндроидSafari на IOSSamsung Интернет
:hover

1

12

1

4

4

2

1

18

4

10.1

1

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

1.0

a_elements

1

12

1

4

4

2

37

18

4

10.1

1

1.0

all_elements

1

12

В Edge наведение курсора на элемент и последующая прокрутка вверх или вниз без перемещения указателя приведет к тому, что элемент останется в состоянии :hover до тех пор, пока указатель не будет перемещен. См. Ошибку 5381673 .

1

7

[«В Internet Explorer 8 — Internet Explorer 11 при наведении курсора на элемент и последующей прокрутке вверх или вниз без перемещения указателя элемент остается в состоянии :hover до тех пор, пока указатель не будет перемещен. См. Ошибку 926665. «, «В Internet Explorer» 9 (и , возможно , раньше), если в <table> имеет родителя с не- auto width , overflow-x : auto; , то <table> имеет достаточное содержание горизонтально перелива его родителя, и есть :hover набор стилей на элементы в таблице, то при наведении указателя мыши на указанные элементы высота <table> увеличится. Посмотрите живую демонстрацию, которая вызывает ошибку. Один из способов обхода ошибки — установить min-height: 0%; ( необходимо указать % unit, так как unitless и px не работают) в родительском элементе <table> . «]

7

2

37

18

4

10.1

1

1.0

pseudo_elements

1

12

28

11

15

2

≤37

18

28

14

1

1.0

См.также

React — пишем CSS в Javascript

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

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

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

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

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

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

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

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

npm i --save aphrodite

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

import { css } from 'aphrodite';

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

import { StyleSheet } from 'aphrodite';

export default StyleSheet.create({
  container: {
    background: '#bfbea7'
  }
})

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

<div className={css(styles.container)}>
  Our App
</div>

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

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

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

import { css } from 'aphrodite/no-important';
import { StyleSheet } from 'aphrodite/no-important';

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

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

export default StyleSheet.create({
  container: {
    background: '#bfbea7',
    display: 'flex'
  }
})

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

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

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

export const blackSquare = {
  background: 'black',
  width: '100px',
  height: '100px'
  borderRadius: '3px'
};

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

<div className={css(styles.square)}/>

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

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

import { StyleSheet } from 'aphrodite/no-important';
import { blackSquare } from './squareStyles';

export default StyleSheet.create({
  container: {
    background: '#bfbea7',
    display: 'flex'
  },

  square: {
    ...blackSquare
  }
})

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

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

square: {
  ...blackSquare,
  width: '50px',
  height: '50px'
}

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      li{
      margin-bottom:15px;
      }
      li.pointer {
      cursor: pointer;
      }
      li:hover {
      background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h5>Наведите курсор мыши на элемент списка и увидите, как меняется курсор по умолчанию в указатель:</h5>
    <ul>
      <li>Элемент списка 1 с курсором по умолчанию.</li>
      <li>Элемент списка 2 с курсором-указателем по умолчанию.</li>
      <li>Элемент списка с с курсором по умолчанию.</li>
    </ul>
  </body>
</html>

Попробуйте сами!

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

Пример¶

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      li:nth-child(odd) { 
      background: #1c87c9; 
      cursor: progress; 
      width: 50%; 
      padding: 5px; 
      } 
      li:nth-child(even) { 
      background: #ccc; 
      cursor: pointer; 
      width: 50%; 
      padding: 5px; 
      } 
    </style>
  </head>
  <body>
    <p>Наведите курсор мыши на элементы, чтобы увидеть как меняется курсор:</p>
    <ul>
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
      <li>Элемент списка 4</li>
      <li>Элемент списка 5</li>
      <li>Элемент списка 6</li>
      <li>Элемент списка 7</li>
    </ul>
  </body>
</html>

Попробуйте сами!

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

Чтобы изменить «pointer» в «default», вам понадобится эта часть кода:

a:hover {
cursor: default;
}

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

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .link:hover {
      cursor: default;
      }
    </style>
  </head>
  <body>
    <h5>Наведите курсор мыши на гиперссылку и увидите, как "pointer" меняется в "default":</h5>
    <p><a href="https://www.w3docs.com">W3docs</a> ссылка с исходным видом "pointer".</p>
    <p><a href="https://www.w3docs.com">W3docs</a>ссылка с измененным курсором "default".</p>
  </body>
</html>

Попробуйте сами!

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

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

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

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

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

.mycursor {
cursor: url("myimage.png"), pointer;	
}

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

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

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background: #eee;
      text-align: center;
      }
      button {
      display: inline-block;
      background-color: #1c87c9;
      color: #eee;
      margin: 25px;
      position: relative;
      width: 140px;
      height: 45px;
      border-radius: 3px;
      border: none;
      font-size: 1.5em;
      text-align: center;
      text-decoration: none;
      box-shadow: 0 2px 8px 0 #999;
      }
      button:hover {
      background-color: #999;
      color: #ffcc00;
      }
      #happy {
      cursor: url("/uploads/media/default/0001/02/ee4486d1b3fc998e444c3b0100c73db282760eb5.png"), auto;
      }
      #sad {
      cursor: url("/uploads/media/default/0001/02/38cb87a27305100311d9c96e5a5ebb88f04d8034.png"), auto;
      }
      #love {
      cursor: url("/uploads/media/default/0001/02/4be757cf6e9ffc865861649ca423654484ad3dc1.png"), auto;
      }
    </style>
  </head>
  <body>
    <h3>Какое у вас впечатление от нашей веб-страницы?</h3>
    <button>Радостное</button>
    <button>Грустное</button>
    <button>Влюбленное</button>
  </body>
</html>

Попробуйте сами!

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

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      width: 600px;
      margin: 0.5em auto;
      }
      img {
      width: 280px;
      height: 186px;
      margin: 5px;
      display: inline-block;
      background-position: 50% 50%;
      }
      .dog {	
      cursor: url("/uploads/media/default/0001/02/53f34c2d574ce31a424df7855ef3e8f2ece589d6.png"), auto;
      }
      .cactus {	
      cursor: url("/uploads/media/default/0001/02/ea8020fd3fdb96affa77c8164f80d88f8c419e0f.png"), auto;
      }
      .nature {	
      cursor: url("/uploads/media/default/0001/02/edcafd9e202ae5f2ae6ae839d21d1d642b2ace00.png"), auto;	
      }
      .house {
      cursor:
      url("/uploads/media/default/0001/02/bb6f118f3b06838624b4297992457093f40fd92b.png"), auto;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/02/fc16e475b5cefcbe57924b1a4a3b3e38e936b77c.png" alt="cactus">
    <img src="/uploads/media/default/0001/02/2a85e41725d19aeae7066836accaababd42e638d.png" alt="nature">
    <img src="/uploads/media/default/0001/02/23df99002f94be0d1ca915058e2216c756be155e.png" alt="dog">
    <img src="/uploads/media/default/0001/02/1492763b186dabd60c4fbad49ce6d4ba3925b712.png" alt="house">
  </body>
</html>

Попробуйте сами!

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

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

Для значений «zoom-in», «zoom-out», «grab» и «grabbing» добавляется расширение -webkit-.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      text-align: center;
      font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .cursor {
      display: flex;
      flex-wrap: wrap;
      }
      .cursor > div {
      flex: 120px;
      padding: 10px 2px;
      white-space: nowrap;
      border: 1px solid #666;
      border-radius: 5px;
      margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
      background: #1c87c9;
      }
      .auto { cursor: auto; }
      .default { cursor: default; }
      .none { cursor: none; }
      .context-menu { cursor: context-menu; }
      .help { cursor: help; }
      .pointer { cursor: pointer; }
      .progress { cursor: progress; }
      .wait { cursor: wait; }
      .cell { cursor: cell; }
      .crosshair { cursor: crosshair; }
      .text { cursor: text; }
      .vertical-text { cursor: vertical-text; }
      .alias { cursor: alias; }
      .copy { cursor: copy; }
      .move { cursor: move; }
      .no-drop { cursor: no-drop; }
      .not-allowed { cursor: not-allowed; }
      .all-scroll { cursor: all-scroll; }
      .col-resize { cursor: col-resize; }
      .row-resize { cursor: row-resize; }
      .n-resize { cursor: n-resize; }
      .e-resize { cursor: e-resize; }
      .s-resize { cursor: s-resize; }
      .w-resize { cursor: w-resize; }
      .ns-resize { cursor: ns-resize; }
      .ew-resize { cursor: ew-resize; }
      .ne-resize { cursor: ne-resize; }
      .nw-resize { cursor: nw-resize; }
      .se-resize { cursor: se-resize; }
      .sw-resize { cursor: sw-resize; }
      .nesw-resize { cursor: nesw-resize; }
      .nwse-resize { cursor: nwse-resize; }
      .grab { cursor: -webkit-grab; cursor: grab; }
      .grabbing { cursor:  -webkit-grabbing; cursor: grabbing; }
      .zoom-in { cursor: -webkit-zoom-in; cursor: zoom-in; }
      .zoom-out { cursor:  -webkit-zoom-out; cursor: zoom-out; }
    </style>
  </head>
  <body>
    <h3>Пример свойства cursor</h3>
    <p> Наведите курсор мыши на элемент и увидите изменения:</p>
    <div>
      <div>auto</div>
      <div>default</div>
      <div>none</div>
      <div>context-menu</div>
      <div>help</div>
      <div>pointer</div>
      <div>progress</div>
      <div>wait</div>
      <div>cell</div>
      <div>crosshair</div>
      <div>text</div>
      <div>vertical-text</div>
      <div>alias</div>
      <div>copy</div>
      <div>move</div>
      <div>no-drop</div>
      <div>not-allowed</div>
      <div>all-scroll</div>
      <div>col-resize</div>
      <div>row-resize</div>
      <div>n-resize</div>
      <div>s-resize</div>
      <div>e-resize</div>
      <div>w-resize</div>
      <div>ns-resize</div>
      <div>ew-resize</div>
      <div>ne-resize</div>
      <div>nw-resize</div>
      <div>se-resize</div>
      <div>sw-resize</div>
      <div>nesw-resize</div>
      <div>nwse-resize</div>
      <div>grab</div>
      <div>grabbing</div>
      <div>zoom-in</div>
      <div>zoom-out</div>
    </div>
  </body>
</html>

Попробуйте сами!

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

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

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

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

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

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

HTML:

  
 / * Общий родитель * /

   Light / * выделенный термин в тексте * /
   настолько же повсеместен, насколько и загадочен. /*простой текст*/

  
 / * Контейнер для: определений, отображаемых при наведении * /
    
 / * пример записи определения * / Light:
      
 Краткий ответ: тип энергии, который вы видите

CSS:

  / * прочитано: "когда пользователь наводит курсор на # свет где-то внутри #explainBox
    установите display на inline-block для #light прямо внутри #definitions.* /

#explainBox #light: hover ~ # definitions> #light {
  дисплей: встроенный блок;
}

.def {
  дисплей: нет;
}

#definitions {
  цвет фона: черный;
  положение: фиксированное;
  / * атрибут позиции * /
  верх: 5em;
  / * атрибут позиции * /
  справа: 2em;
  / * атрибут позиции * /
  ширина: 20em;
  высота: 30em;
  граница: сплошной оранжевый 1px;
  радиус границы: 12 пикселей;
  отступ: 10 пикселей;
}

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

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

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

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

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

Спросил

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

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

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

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

TylerH

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

Создан 24 мар.

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

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

2

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

 .example: hover + .example-title {
    белый;
}

sass:

  .example {
    &: hover {
        & + .example-title {
            белый цвет;
        }
    }
}

Создан 24 марта ’16 в 23: 192016-03-24 23:19

j08691j08691

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

1

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

 .пример: hover ~ .example-title {background: red;}

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

Создан 24 марта ’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 при наведении на тег.

< html >

< головка >

000 000

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

}

дел {

дисплей: нет;

}

a: hover + div {

display: block;

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

font-size: 25px;

}

стиль >

головка >

0005 0005 = "текст: выравнивание: по центру;" >

< h2 > GeeksforGeeks h2 >

< b 9000 см. Элемент ниже 9000

элемент < div >.

b >

< br >

< a 000 000 000 > GeeksforGeeks a >

< div >

Портал компьютерных наук для компьютерных фанатов.

div >

корпус >

90

Вывод:
Перед наведением на тег:

После наведения на тег:

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

Эффект наведения, который меняет другой элемент> Litmus

Kinda * похоже, работает. Все нормально, когда я использую простой HTML. Но когда я пытаюсь использовать его внутри шаблона MailChimp (который я сначала экспортировал, а затем загрузил как собственный код), он ничего не делает.

Что особенно странно, когда я удаляю эту часть из стиля MailChimp, кажется, что она снова работает.

Это блок, который мне пришлось удалить (но он мне нужен):

 
    / *
    @tab Body
    @section Стиль тела
    @tip Установите цвет фона и границы для области тела письма.
    * /
        #templateBody {
            / * @ редактируемый * / цвет фона: #ffffff;
            / * @ editable * / background-image: none;
            / * @ editable * / background-repeat: no-repeat;
            / * @ editable * / background-position: center;
            / * @ editable * / background-size: cover;
            / * @ editable * / border-top: 0;
            / * @ editable * / border-bottom: 0;
            / * @ редактируемый * / padding-top: 9px;
            / * @ редактируемый * / padding-bottom: 32px;
        }

        #templateBody.mcnTextContent, # templateBody .mcnTextContent p {
            / * @ редактируемый * / color: # 202020;
            / * @ editable * / font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
            / * @ editable * / font-size: 16px;
            / * @ редактируемый * / высота строки: 150%;
            / * @ editable * / text-align: left;
        }
    / *
    @tab Body
    @section Ссылка на тело
    @tip Установите стиль для ссылок в теле письма. Выберите цвет, который поможет им выделиться из вашего текста.
    * /
        #templateBody.mcnTextContent a, # templateBody .mcnTextContent p a {
            / * @ редактируемый * / color: # 2baadf;
            / * @ editable * / font-weight: normal;
            / * @ editable * / text-decoration: underline;
        }
    / *
    @tab Нижний колонтитул
    Стиль нижнего колонтитула @section
    @tip Установите цвет фона и границы для области нижнего колонтитула вашего электронного письма.
    * /
        #templateFooter {
            / * @ редактируемый * / цвет фона: #ffffff;
            / * @ editable * / background-image: none;
            / * @ editable * / background-repeat: no-repeat;
            / * @ editable * / background-position: center;
            / * @ editable * / background-size: cover;
            / * @ editable * / border-top: 0;
            / * @ editable * / border-bottom: 0;
            / * @ редактируемый * / padding-top: 9px;
            / * @ редактируемый * / padding-bottom: 9px;
        }
    / *
    @tab Нижний колонтитул
    Текст нижнего колонтитула @section
    @tip Установите стиль для текста нижнего колонтитула электронного письма.Выберите размер и цвет, которые легко читаются.
    * /
        #templateFooter .mcnTextContent, # templateFooter .mcnTextContent p {
            / * @ редактируемый * / color: # 656565;
            / * @ editable * / font-family: Helvetica;
            / * @ редактируемый * / размер шрифта: 12 пикселей;
            / * @ редактируемый * / высота строки: 150%;
            / * @ editable * / text-align: center;
        }
    / *
    @tab Нижний колонтитул
    @section Ссылка нижнего колонтитула
    @tip Установите стиль для ссылок нижнего колонтитула вашего электронного письма. Выберите цвет, который поможет им выделиться из вашего текста.* /
        #templateFooter .mcnTextContent a, # templateFooter .mcnTextContent p a {
            / * @ редактируемый * / color: # 2baadf;
            / * @ editable * / font-weight: normal;
            / * @ editable * / text-decoration: underline;
        }

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

Размещено: 21 февраля 2018 г. | Автор: Юлия | Рубрика: Разработка, советы и хитрости | Теги: изменить стиль элемента при наведении, css, селектор css, наведение, наведение | Нет комментариев »

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

Мой HTML-код выглядит следующим образом:

  2. тестовое изображение

  5. Наведите!

И элемент «кнопка» должен менять свой цвет при наведении курсора на элемент «div class =» card »‘.

В этом случае всю работу выполняет

  1. .кнопка "мой контейнер" i {

  2. цвет фона: # 538feb;

  3. непрозрачность: 0,65;

  4. }

  5. .my-container button i: навести {

  6. цвет фона: # 4485ea;

  7. непрозрачность: 1;

  8. }

Другими словами,
, если кнопка находится где-то внутри контейнера:
.my-container: hover button i {background-color: blue;}

Если кнопка находится непосредственно внутри контейнера:
.my-container: hover> button i {background-color: blue;}

Если кнопка находится рядом (после закрывающего тега контейнера) с контейнером:
.my-container: hover + button i {background-color: blue;}

Если кнопка находится где-то внутри контейнера:
.my-container: hover button i {background-color: blue;}

Если кнопка является дочерней по отношению к контейнеру:
.my-container: hover ~ button i {background-color: blue;}

* Дополнительную информацию можно найти в справочнике по CSS Selector.

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

Как игнорировать события Hover / Mouseover для определенного элемента в CSS с помощью свойства pointer-events - Techstacker

Узнайте, как удалить / игнорировать событие mouseover / hover (: hover ) для определенных элементов HTML с помощью указателя - события недвижимость.

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

Содержание и структура карты пользовательского интерфейса

Каждый предмет карты галереи состоит из следующих элементов:

  • Фото сотрудника - черно-белое
  • Имя сотрудника - белый
  • Роль сотрудника - белый
  • Наложение тонкого темного фона

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

Пример карты пользовательского интерфейса

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

Имя сотрудника

Роль сотрудника

Но есть проблема. Возможно, вы уже заметили это. Попробуйте навести указатель мыши на текстовую область, вы понимаете, в чем проблема?

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

Вот HTML-код:

  

  
 

  
  

    
 Имя сотрудника 

    
 Роль сотрудника

И CSS:

  .card {
  максимальная ширина: 350 пикселей;
  положение: относительное;
}

.card-overlay {
  background-image: linear-gradient (180deg, прозрачный, rgba (0, 0, 0, 0.5));
  высота: 100%;
  ширина: 100%;
  позиция: абсолютная;
  верх: 0;
  слева: 0;
  переход: цвет фона 0,6 с;
}

.card-overlay: hover {
  цвет фона: rgba (255, 204, 7, 0,5);
}

.card-image {
  максимальная ширина: 100%;
  дисплей: блок;
}

.card-info {
  позиция: абсолютная;
  внизу: 2 бэр;
  слева: 2 бэр;
}

.card-name,
.card-role {
  белый цвет;
  размер шрифта: 1,5 бэр;
  высота строки: 1,25;
  набивка: 0,25 бэр;
}

.card-name {
  font-weight: жирный;
}

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

Из-за порядка наложения HTML.Порядок наложения обычно контролируется свойством CSS z-index . Однако существует порядок стекирования по умолчанию , который возникает, если вы не обращаетесь к нему напрямую с помощью CSS.

z-index - это свойство порядка стека CSS. Элемент, имеющий наивысшее значение (число) z-index , помещается перед другими элементами - при условии, что их значение позиции совпадает. Значение по умолчанию z-index для всех элементов на веб-странице - auto , что совпадает с нулем 0 .

Итак, поскольку у нас есть два элемента, которые позиционируются как абсолютные, и оба имеют z-index по умолчанию из auto (0), какой из них находится перед другим в порядке наложения (один должен выиграть)?

Побеждает тот, который идет последним в вашем HTML.

В этом случае контейнер

, содержащий текстовые элементы имени и роли, идет после элемента наложения карты :

  

  
 

  
  

    
 Имя сотрудника 

    
 Роль сотрудника

В примере карты пользовательского интерфейса, как только вы наводите указатель мыши на текстовые элементы, вы больше не наводите курсор на элемент наложения, а на элемент , который не имеет : hover (псевдокласс) прикреплен. Только .card имеет это (см. Код CSS).

Что ты умеешь?

Если вы физически переместите элемент

вниз на ниже ,

Имя сотрудника
Роль сотрудника

Затем порядок наложения поменяется местами, и происходит следующее:

Имя сотрудника

Роль сотрудника

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

Но подождите ... Теперь, когда порядок наложения был изменен, текстовые элементы становятся серыми из-за наложения, которое теперь находится впереди / поверх него.

Мы решили одну проблему при создании другой.

Давайте, , а не , воспользуемся этим подходом и переместим элемент

обратно в исходное положение.

Что, если вместо этого мы дадим классу .card-overlay значение z-index , равное 1 ?

Теперь наложение карты будет помещено перед card-info (который по-прежнему имеет z-index : 0 ), потому что он имеет более высокий порядок стека ( z-index: 1 ), а теперь цвет change on hover событие снова будет работать без перебоев - и это здорово, но...

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

ниже элемента

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

Это недопустимо!

Указатель событий спешит на помощь!

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

События указателя - это все, что связано с действиями мыши, например щелчок, прокрутка или перемещение курсора мыши над элементом (наведение курсора).

Итак, я просто добавил событий-указателей: none; в мой класс .card-info , как его:

  .card-info {
  позиция: абсолютная;
  внизу: 2 бэр;
  слева: 2 бэр;
  указатель-события: нет;
}

И теперь вы можете навести курсор на всю карту пользовательского интерфейса, включая текст, не отменяя событие наведения - и текстовые элементы сохранят свой 100% белый цвет:

Имя сотрудника

Роль сотрудника

Большой успех!

Ознакомьтесь с кодом CodePen.

Как наложить один Div поверх другого

Как наложить один Div поверх другого

  1. Фрагменты
  2. ›
  3. HTML
  4. ›
  5. Как наложить один Div поверх другого

Создание эффекта наложения для двух

элементы можно легко сделать с помощью CSS. Это можно сделать с помощью комбинации свойств CSS position и z-index. Z-индекс элемента определяет его порядок в контексте наложения. В наших примерах мы будем использовать «абсолютные» и «относительные» значения свойства position и добавим свойство z-index, чтобы указать порядок наложения для позиционированных элементов.

Итак, приступим!

Создать HTML¶

  • Используйте элемент
    с классом с именем «контейнер».
  • Добавьте два других элемента
    в первый. Также добавьте к ним классы.

Добавить CSS¶

  • Укажите ширину и высоту класса «контейнер». Установите положение «относительное» и добавьте свойство поля.
  • Установите для ширины и высоты класса «бок» значение «100%». Укажите позицию с «абсолютным» значением. Добавьте верхнее и левое свойства. Также укажите фон и прозрачность класса «коробки».
  • Стилизуйте класс «наложения», используя свойства z-index, margin и background.
  .container {
  ширина: 150 пикселей;
  высота: 150 пикселей;
  положение: относительное;
  маржа: 30 пикселей;
}

.коробка {
  ширина: 100%;
  высота: 100%;
  позиция: абсолютная;
  верх: 0;
  слева: 0;
  непрозрачность: 0.7;
  фон: # 0057e3;
}

.overlay {
  z-индекс: 9;
  маржа: 30 пикселей;
  фон: # 009938;
}

Теперь мы можем объединить части нашего кода.

Пример наложения одного

на другой: ¶
  

  
     Название документа 
    <стиль>
      .container {
        ширина: 150 пикселей;
        высота: 150 пикселей;
        положение: относительное;
        маржа: 30 пикселей;
      }
      .коробка {
        ширина: 100%;
        высота: 100%;
        позиция: абсолютная;
        верх: 0;
        слева: 0;
        непрозрачность: 0,7;
        фон: # 0057e3;
      }
      .overlay {
        z-индекс: 9;
        маржа: 30 пикселей;
        фон: # 009938;
      }

Попробуйте сами »

Результат¶

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

Пример наложения одного

на другой с эффектами наведения: ¶
  

  
     Название документа 
    <стиль>
      .container {
        позиция: абсолютная;
        высота: 250 пикселей;
        ширина: 400 пикселей;
        цвет фона: # 7d807e;
      }
      .box1 {
        цвет: #fff;
        padding-top: 60 пикселей;
        отступ слева: 50 пикселей;
        размер шрифта: 50 пикселей;
        font-weight: жирный;
      }
      .box2 {
        отступ слева: 50 пикселей;
      }
      .box1: hover {
        z-индекс: -1;
        непрозрачность: 0,5;
        размер шрифта: 30 пикселей;
        выравнивание текста: центр;
        стиль трансформации: все;
        продолжительность перехода: 2 с;
      }
      .box2: hover {
        z-индекс: -1;
        непрозрачность: 0,3;
        размер шрифта: 40 пикселей;
        выравнивание текста: центр;
        стиль трансформации: все;
        продолжительность перехода: 2 с;
      }
    
  
  
    

      
 W3Docs 

      
 Изучите программирование

Попробуйте сами »

Спасибо за ваш отзыв!

Считаете ли вы это полезным? Да Нет

Статьи по теме

Мы используем файлы cookie для улучшения взаимодействия с пользователем и анализа посещаемости веб-сайта.Принимаю

.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *