Hover html: Псевдокласс :hover — Селекторы. Знакомство — HTML Academy

html — Как сделать один :hover для двух элементов?

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

Вопрос: как сделать так, чтоб при наведении на всю область родительского блока, :hover срабатывал сразу для желтого и фиолетового блоков, НО при этом параметры, которые меняются при наведении были по-прежнему разными?

.block {
  width: 200px;
  height: 200px;
  background: yellow;
  border: 1px dashed black;
  transition: 2s linear;
  display: flex;
  align-items: center;
}
.block_child {
  width: 100px;
  height: 100px;
  background: purple;
  transition: 2s linear;
  border: 2px double white;
}
.block:hover {
  background: yellowgreen;
  width: 100%;
}
.block_child:hover {
  width: 100%;
  background: yellow;
  border: 2px transparent;
}

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

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

• html
• css
• hover
• transition

1

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

.block:hover {
  background: yellowgreen;
  width: 100%;
}
.block:hover > .block_child {
  width: 100%;
  background: yellow;
  border: 2px transparent;
}
// селектор > означает что стили будут
// применены только к прямым потомкам
// если это не требуется, то достаточно
// .block:hover .block_child  

Рабочий пример на основе вашего кода:

.block {
  width: 200px;
  height: 200px;
  background: yellow;
  border: 1px dashed black;
  transition: 2s linear;
  display: flex;
  align-items: center;
}
.block_child {
  width: 100px;
  height: 100px;
  background: purple;
  transition: 2s linear;
  border: 2px double white;
}
. block:hover {
  background: yellowgreen;
  width: 100%;
}
.block:hover > .block_child {
  width: 100%;
  background: yellow;
  border: 2px transparent;
}

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

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

СSS Селектор :hover

schoolsw3. com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

❮ Назад CSS Селекторы Справочник Вперед ❯

Пример

Установить селектор и стиль ссылки при наведении на нее курсора мыши:

a:hover {
    background-color: yellow;
}

Редактор кода »

Определение и использование

Селектор :hover используется для выбора элементов при наведении на них курсора мыши.

Совет: Селектор :hover может использоваться на всех элементах, а не только на ссылках.

Совет: Используйте селектор :link для стиля ссылок на непросмотренные страницы, селектор :visited для стиля ссылок на посещенные страницы, и селектор :active для стиля активной ссылки.

Примечание:

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Примечание: В IE должна быть объявлена декларация <!DOCTYPE> чтобы селектор :hover работал с другими элементами, кроме элемента <a>.

CSS Синтаксис

:hover {
    css декларации;
} Демо

Примеры

Пример

Установить селектор и стиль элемента <p>, <h2> и <a> при наведении на него мыши:

p:hover, h2:hover, a:hover {
    background-color: yellow;
}

Редактор кода »

Пример

Установить селектор и стиль непросмотренных, посещенных, наведенных и активных ссылок:

/* непросмотренная ссылка */
a:link {
    color: green;
}

/* посещенная ссылка */
a:visited {
    color: green;
}

/* наведите указатель мыши на ссылку */

/* выбранная ссылка */
a:active {
    color: yellow;
}

Редактор кода »

Пример

Установить стиль ссылки с различными стилями:

a. ex1:hover, a.ex1:active {
    color: red;
}

a.ex2:hover, a.ex2:active {
    font-size: 150%;
}

Редактор кода »

Пример

Наведите курсор на элемент <span>, чтобы показать элемент <div> (как подсказка):

div {
    display: none;
}

span:hover + div {
    display: block;
}

Редактор кода »

Пример

Установить показ и скрытие выпадающее меню при наведении мыши:

ul {
    display: inline;
    margin: 0;
    padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
    position: absolute;
    width: 200px;
    display: none;
}
ul li ul li {
    background: #555;
    display: block;
}
ul li ul li a {display:block !important;}

Редактор кода »

Связанные страницы

CSS Учебник: CSS Ссылки

CSS Учебник: CSS Псевдо классы

❮ Назад CSS Селекторы Справочник Вперед ❯

ВЫБОР ЦВЕТА

ТОП Учебники

ТОП Справочники

ТОП Примеры

Форум | О SchoolsW3

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

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

Как добавить описание при наведении с помощью пользовательского HTML

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

В этой статье

• Как добавить описание при наведении
• Содержимое с наведением курсора со встроенными изображениями

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

1
Добавьте столбец в таблицу данных , содержащий информацию, которую вы хотите отображать в описании при наведении. В нашем примере это столбцы «Ссылка» и «Цитата».


2
Далее вам нужно убедиться, что столбец, который вы только что создали, введен в Выберите столбцы для визуализации панели . В нашем случае данные находились в столбце E, поэтому мы ввели этот столбец в Опция Текст .
3
В настройках Карты включите Настроить карточку HTML . В этом поле будет существующий код, но вы можете удалить его, чтобы мы могли ввести свой собственный код. Не волнуйтесь, если все исчезнет, ​​оно скоро снова появится, когда мы скопируем и вставим наш HTML.
4
Используя пользовательский HTML-код карты, мы теперь контролируем элементы и информацию, которые будут отображаться на карте, вместо того, чтобы позволить Flourish автоматически вводить данные, которые мы выбрали. Начнем с того, что мы собираемся разместить наше изображение с очень важным описанием при наведении. Так как наши изображения размещены под Image , мы будем обращаться к нему для отображения изображений. Наряду с этим мы собираемся включить контент, который мы хотим отображать, когда кто-то наводит курсор на изображение. Поскольку наш контент находится под Столбец Quote , мы будем использовать его в качестве ссылки.
6
С помощью стилей в этом HTML-коде вы сможете изменить размер поля описания, цвет шрифта, размер, что угодно!
Вот стиль, который мы использовали для создания описания при наведении:
7
Если вы хотите изменить любой из стилей в поле описания, вам нужно будет изменить код в .img_описание . Вот несколько параметров, которые вы можете изменить:
• размер шрифта : Здесь вы можете изменить размер текста
• padding-top : это изменит расположение текста в описании при наведении.
• background : Используйте это, чтобы изменить цвет окна описания.
• цвет : Используйте шестнадцатеричный код для изменения цвета шрифта

СОВЕТ: Используйте RGB для создания низкой непрозрачности, используя значения 0,1-0,9.

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

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

Содержимое при наведении со встроенными изображениями

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

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

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

2
Вам нужно будет добавить некоторый дополнительный код для ваших изображений, которые будут включены в раздел наведения на карточках. Это должно быть включено в «назад» раздел вашего кода:
3
Эти новые функции теперь нуждаются в некотором дополнительном стиле, чтобы выглядеть именно так, как они должны быть. Вот как мы стилизовали наши элементы при наведении в примере выше:
Теперь ваши изображения должны отображаться в описании при наведении курсора!

Последнее обновление: 26 апреля 2023 г.

Как добавить текст при наведении курсора с помощью HTML

Можно добавить текстовое описание при наведении курсора без Javascript и даже без CSS. Давайте посмотрим, как мы можем это сделать, используя только HTML.

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

 

  <голова>
    
  
  <тело>
     
Пример
 
    
Наведите указатель мыши на этот текст, чтобы увидеть результат.
  
 

 

  <голова>
    
  
  <тело>
     
Пример
 
    Наведите курсор на этот текст, чтобы увидеть результат. 
  
 

 

  <голова>
    
  
  <тело>
     
Пример
 
    HTML
    
Наведите курсор
  
 

 

  <голова>
    
  
  <тело>
     
Пример
 
     com">W3docs