Как изменить цвет блока при наведении курсора в css

Цвет кнопки при наведении, отличный от класса в css

задача в том что у меня более 200 различных цветов. В вопросе написал про три.

27 сен 2017 в 19:21

@RusBolik значит 1) надо было задачу полностью описывать)) 2) тут значит скорее всего нужен js

27 сен 2017 в 19:22

Алексей, может подскажите. Я в js скриптах полный ноль

27 сен 2017 в 19:24

@RusBolik тут зависит всё от исходных данных. что это за кнопки, откуда берутся, генерируются ли через PHP или это статичная разметка, какова в целом задача и пр. Чтобы посоветовать нужно больше входных данных. Например если генерируются кнопки, то самый простой вариант — писать атрибут data к ним с прикрепленным к ним цветом и уже при наведении брать оттуда цвет. Будет некий модифицированный вариант вот такого плана: jsfiddle.net/ohk18qda . но без полного конкретного описания сказать нельзя. Ну и т.к. это будет другой вопрос по js — придется задавать его снова))

При наведении курсора на ссылку меняется цвет фона блока

При наведении курсора на ссылку должен меняться цвет фона блока в котором находится ссылка. Подскажите пожалуйста как это сделать! Пробовал сделать при помощи hover в итоге получается только менять фон самой ссылки но не самого блока, так суть в том что цвет должен меняться только при наведении на кнопку, а не на блок в целом. HTML

 
 
Research
 
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.
 READ MORE 
 

.services_bloc < width: 370px; background-color: #fff; >.button3

Отслеживать

3 3 3 бронзовых знака

задан 2 мая 2019 в 19:53

Константин Константин

11 1 1 серебряный знак 2 2 бронзовых знака

Шутите? У вас в тегах ответ есть))000 Используйте hover , в чем конкретно проблема?

2 мая 2019 в 20:18

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

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

1. При ховере на кнопку (а не на ее родителя!) должны перекрашиваться ее соседи (и родитель, но это позже) — используем оператор влияния на соседние теги. Но он работает только на те, что ниже по коду, а текст у нас выше кнопки.
2. Значит используем флекс на родителе и перевернем порядок — кнопка в коде идет первой, а отобразится последней, то что нужно!
3. Повлиять на фон родительского блока из дочернего средствами css невозможно, но мы сделаем хитро — а не будем его менять вообще. Мы его перекроем. Пусть на ховер у кнопки возникает псевдоэлемент :after с нужным цветом фона, растянем его абсолютным позиционированием на всю карточку, положим под контент карточки z-index: -1 и уберем реакцию на ховер с него pointer-events: none;
4. Готово )

.card < position: relative; width: 300px; margin: 20px auto; text-align: center; background-color: yellow; >.card__info < display: flex; position: relative; padding: 20px; flex-flow: column-reverse nowrap; z-index: 1; >.card__btn < display: block; width: 100px; margin: 20px auto 0; padding: 10px; border: 1px solid black; cursor: pointer; >.card__btn:hover < color: #fff; border-color: #fff; >.card__btn:hover ~ * < color: #fff; >.card__btn:hover:after

 
 
Hover me! 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit expedita a voluptatum quibusdam veniam architecto in harum sunt ipsum dolore.
 
 

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

Как сделать так, чтобы при наведении на один элемент (hover) менять стили другого элемента?
Можно ли это сделать только на css ?
К примеру: навожу на блок и хочу чтобы все заголовки в этом блоке стали другого цвета. Как записать?
Так не работает:

.block:hover < .block h1 < color: red;>> 

Отслеживать
user207618
задан 1 фев 2014 в 14:05
1,727 4 4 золотых знака 25 25 серебряных знаков 45 45 бронзовых знаков

10 ответов 10

Сортировка: Сброс на вариант по умолчанию

.section < background: #ccc; >.layer < background: #ddd; >.section:hover img < border: 2px solid #333; >.section:hover .layer

 
 
Lorem Ipsum
 

Отслеживать
user207618
ответ дан 1 фев 2014 в 14:09
17.9k 3 3 золотых знака 46 46 серебряных знаков 86 86 бронзовых знаков

Для соседних элементов:

.block1:hover + .block2 h1

Для любых элементов(оба блока должны быть внутри одного элемента):

 .block1:hover ~ .block2 h1

Отслеживать
6,894 2 2 золотых знака 26 26 серебряных знаков 56 56 бронзовых знаков
ответ дан 18 дек 2015 в 18:06
Женя Веденин Женя Веденин
1,304 1 1 золотой знак 17 17 серебряных знаков 33 33 бронзовых знака
И block2 должен идти после block1
18 дек 2015 в 21:17
Добавил сниплет-пример если не возражаете
18 дек 2015 в 21:36
Работает только если менять блоки местами, а это не всегда удобно.
25 авг 2018 в 18:45
так заработает тот что глубже «.block1:hover ~ div .block2 h1 < color: red;>» codepen.io/woodsleaf/pen/PryOjg
8 июл 2019 в 0:30
то есть, внешний блок нереально стилизовать?
15 сен 2019 в 10:08

Заранее говорю, русский язык у меня не самая сильная сторона, заранее извиняюсь за ошибки, если будут 😉 Выше показанные примеры все правильные, но они очень ограничены, при желании изменить другой элемент(который может быть совсем далеко) будет не возможно что-то изменить. Но я могу предложить вариант с JavaScript и он чень простой для усвоения. Главное не бойтесь использовать 🙂

function changeItem() < document.getElementById('one-two').style.width = '200px'; >// функция, которая сработает при наведении. //она означает - выбрать элемент к Id у которого надо что-то изменить. // когда в скобки где написано one-two добавите Id своего элемента function rechangeItem() < document.getElementById('one-two').style.width = '100px'; >// тут всё также. но наобарот. протсес происходящий про отводе курсора.

#one, #two, #one-two < width: 100px; height: 30px; background: red; margin: 30px; >/*Надеюсь, что тут все понятно, заданы елементарные свойства :)*/

Отслеживать
ответ дан 6 сен 2018 в 0:04
Chingiz Mamedov Chingiz Mamedov
323 2 2 серебряных знака 7 7 бронзовых знаков

.s:hover~.d

wow
 
hey

Отслеживать
ответ дан 6 авг 2018 в 6:22
Васильев Мирослав Васильев Мирослав
61 1 1 серебряный знак 1 1 бронзовый знак

.block:hover h1

 
zagolovok
 
zagolovok
 

Отслеживать
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
ответ дан 25 фев 2016 в 10:50
41 2 2 бронзовых знака

Если нужно изменить все заголовки в одном блоке, на который навели курсор мыши, то вот так:

.main:hover h2

 
How are you?
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente.
 
Hi
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente.
 
Ok
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente.
 
So-so
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente.
 

Если же нужно изменять стиль элемента, который находится выше элемента с псевдоклассом :hover, то я делал так (размещал изменяемый элемент ниже элемента с псевдоклассом :hover и при помощи flexbox вытягивал его на нужное мне место):

.main < display: flex; flex-direction: column; font: 10px Arial, sans-serif; color: #333; >.one < order: -1; >.two:hover ~ .one

 
How are you?
 
Hi
 
Ok
 
So-so
 

Отслеживать
ответ дан 5 окт 2017 в 9:19
Viktar Daniliuk Viktar Daniliuk
41 1 1 бронзовый знак

div < padding:20px; background:#eee; border:1px solid #ccc; margin:10px; >.anotherdiv < visibility:hidden; opacity:0; transition:all 1s; >.div:hover + .anotherdiv

 
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Как изменить цвет при наведении на блок?

Ситуация такая. Есть блок в котором есть иконка , заголовок и описание, все это завернуто в border . Нужно чтобы при наведении на блок изменялся цвет бордера, заголовка и цвет иконки, в общем все кроме описания. Не могу понять с помощью чего реализовать такое на css или все таки это javascript. Помогите )

• Вопрос задан более трёх лет назад
• 3208 просмотров

1 комментарий

Оценить 1 комментарий