Css несколько классов hover

Как я могу использовать: hover с несколькими классами

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

Как добавить стиль наведения к моим кнопкам, чтобы изменить цвет на более светлый оттенок? Я думал, что это будет так же просто, как .class class2: hover , но по какой-то причине он не работает.

Вот скрипка, которую я приготовил продемонстрировать: http://jsfiddle.net/7n4Wy/

.red < background: red; >.blue < background: blue; >.button < border-radius: 6px; >.button:hover .red:hover

4 ответа

У вас есть попытка сопоставить .red:hover , который находится внутри .button:hover , что подразумевает вложенный элемент в вашу разметку.

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

@ac7web: 🙂 С таким же успехом можно убрать пробел и получить .button:hover.red:hover , что будет работать, но сбивает с толку из-за двойного :hover .

Вы можете применить CSS-правило к нескольким селекторам (классам вроде «.button» или состояниям вроде «: hover»), разделив их запятой.

Поэтому просто добавьте запятую:

Используйте следующий код JSFIDDLE

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

p.button < border-radius: 6px; >p.red < background: 6px; >p.button.red:hover

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

Источник

Css несколько классов hover

Last updated: Apr 27, 2023
Reading time · 4 min

# Table of Contents

# How to Apply a CSS Hover effect to multiple Elements

To apply a CSS hover effect to multiple elements:

1. Wrap the elements in div tag.
2. Apply the hover effect to the div and scope the specific styles to each element.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> style> .container:hover .first  background-color: aquamarine; > .container:hover .second  background-color: lime; > style> head> body> div class="container"> div class="first">First Boxdiv> div class="second">Second boxdiv> div> body> html> 

Every time I hover over the div that has a class of container , the hover effects are applied to the div elements with classes of first and second .

Notice that I wrapped the two elements in a wrapper div.

Copied! 
div class="container"> div class="first">First Boxdiv> div class="second">Second boxdiv> div> 

Both CSS selects are applied when the user hovers over the div that has a class of container .

Copied! 
.container:hover .first  background-color: aquamarine; > .container:hover .second  background-color: lime; > 

The example assumes that you want to set different styles on the two elements.

The div element with a class of container doesn’t have to be a direct parent of the other two div tags.

For example, the following code sample also works.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> style> .container:hover .first  background-color: aquamarine; > .container:hover .second  background-color: lime; > style> head> body> div class="container"> div> div> div class="first">First Boxdiv> div class="second">Second boxdiv> div> div> div> body> html> 

# Applying the same hover style to multiple elements

If you need to apply the same hover effect to multiple elements when another element is hovered, separate the selectors by a comma.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> style> .container:hover .first, .container:hover .second  background-color: aquamarine; > style> head> body> div class="container"> div class="first">First Boxdiv> div class="second">Second boxdiv> div> body> html> 

The example sets the same hover style on both div elements ( first and second ).

Copied! 
.container:hover .first, .container:hover .second  background-color: aquamarine; > 

You can specify as many comma-separated selectors as necessary.

Both elements to which we want to apply the hover effect are divs, so we could simplify the selector a bit.

Copied! 
.container:hover div  background-color: aquamarine; > 

The selector assumes that you want to apply the hover effect to all div elements that are descendants of the container div.

# Apply a CSS hover effect to multiple elements using JavaScript

You can also use JavaScript to apply a CSS hover effect to multiple elements.

1. Wrap the elements in a div .
2. Add a mouseover event listener to the wrapper div.
3. Style the elements in the mouseover event.
4. Unstyle the elements in a mouseout event.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> div class="container"> div class="first">First Boxdiv> div class="second">Second boxdiv> div> script src="index.js"> script> body> html> 

Here is the related JavaScript code.

Copied! 
const container = document.querySelector('.container'); const first = document.querySelector('.first'); const second = document.querySelector('.second'); container.addEventListener('mouseover', () =>  first.style.backgroundColor = 'lime'; second.style.backgroundColor = 'aquamarine'; >); container.addEventListener('mouseout', () =>  first.style.backgroundColor = ''; second.style.backgroundColor = ''; >); 

We first selected the elements using the document.querySelector method.

Copied! 
const container = document.querySelector('.container'); const first = document.querySelector('.first'); const second = document.querySelector('.second'); 

The querySelector method takes a selector as a parameter and returns the first matching element.

When selecting an element by a class, you would use the .my-class selector and when selecting an element by id, you would use the #my-id selector.

The next step is to set an event listener that listens for the mouseover event.

Copied! 
container.addEventListener('mouseover', () =>  first.style.backgroundColor = 'lime'; second.style.backgroundColor = 'aquamarine'; >); 

The mouseover event gets triggered when the user’s pointing device (a mouse or a trackpad) is used to move the cursor onto the element or one of its children.

When the user hovers over the wrapper div , we apply the hover styles.

Conversely, when the user moves their cursor out of the wrapper div , the mouseout event is triggered.

Copied! 
container.addEventListener('mouseout', () =>  first.style.backgroundColor = ''; second.style.backgroundColor = ''; >); 

You can remove the hover styles in the mouseout event.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Change Select Option Background-Color on Hover in CSS/HTML
• Check if Element is Input or Select dropdown in JavaScript
• Change a Button’s color onClick using JavaScript
• Change button text on Click using JavaScript
• How to Change Text color on Mouseover in JavaScript
• How to adjust a Button’s width to fit the Text in CSS
• How to set a Max Character length in CSS
• Changing Bold Text into Normal (Unbold Text) in HTML
• How to bring an element to the Front using CSS
• Apply multiple inline CSS styles to an HTML element
• Force the text in a Div to stay in one Line in HTML & CSS
• justify-self not working in Flexbox issue [Solved]
• focus() not working in JavaScript issue [Solved]
• Tailwind CSS classes not working in Vanilla or React project
• Tailwind CSS extending colors not working [Solutions]
• Remove whitespace between inline-block elements using CSS

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

Псевдокласс :hover для нескольких элементов

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

:hover для нескольких элементов
div содержит несколько элементов: прямоугольник, текст, картинку. У всех есть псевдокласс :hover.

Псевдокласс hover
Доброго времени суток! Есть два класса(main,subclass), мне нужно что бы при наведении на main.

Псевдокласс :hover
Надо изменить атрибуты одного div’a при наведение на другой. Написал так: <html> <head> .

Не срабатывает псевдокласс :hover !
Обьясните деревянному. Почему не срабатывает код? <!DOCTYPE html> <html> <head> <meta.

Сообщение от СергейСереб

a class="adv_text3" href="#">100% Perfect Results or Money Back div class="circle_arrow"> /div>/a>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

.adv_text3 { display: inline-block; color: #868686; font-size: 34px; padding-left: 692px; padding-top: 10px; padding-right: 100px; line-height: 37px; letter-spacing: -1px; text-decoration: none; } .adv_text3:hover { color: #f6c636; } .circle_arrow { display: inline-block; width: 20px; height: 20px; background-image: url(circlearrows.jpg); background-position: 0px 0px; } .circle_arrow:hover { background-image: url(circlearrows.jpg); background-position: 20px 0px; cursor: pointer; }

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

.adv_text3 { display: inline-block; color: #868686; font-size: 34px; padding-left: 692px; padding-top: 10px; padding-right: 100px; line-height: 37px; letter-spacing: -1px; text-decoration: none; } .adv_text3:hover { color: #f6c636; } .circle_arrow { display: inline-block; width: 20px; height: 20px; background-image: url(circlearrows.jpg); background-position: 0px 0px; } .adv_text3:hover > .circle_arrow { background-image: url(circlearrows.jpg); background-position: 20px 0px; cursor: pointer;

Источник

Как перечислить классы для псевдокласса hover?

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

.p1, .p2, .p3, .p4, .p5:hover {width: 50%;}/* Не работает*/

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

Смена изображений с помощью псевдокласса :hover
<div <img src="images/magnitol.png"> </div> div#r1:hover

Изменение стилей элемента с помощью псевдокласса hover
Здравствуйте. Нужно сделать такой эффект при наведении, как на картинке, без использования.

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

Решение

.p1:hover, .p2:hover, .p3:hover, .p4:hover, .p5:hover {width: 50%;}

а ещё можно использовать препроцессоры LESS или SASS. Там можно будет записать так:

Ademar, человек с просто ховером не может совладать, а вы ему препроцессоры суёте. В своём уме?

Изменение фона ссылки с помощью псевдокласса :hover
Необходимо сделать так, чтобы при наведение на одну любую из ссылок, ее фон менял цвет на прозрачно.

Использование свойств псевдокласса :hover, когда страница открыта
Как сделать, чтобы если я находился на странице было активный элемент,т.е. hover. .follow

Псевдо классы hover first-child
Подскажите можно ли прописать так : #denss_page .denss_menu_items li:hover ul.child:first-child

Использование псевдокласса checked для Radiobutton
Хочу прикрутить css стиль к радиобаттонам, однако не понимаю, как можно идентифицировать нажатую.

Источник