1

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

HTML

<div class="services_bloc">
<img src="img/4.png" alt="">
<h3>Research</h3>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
<a class="button3" href="#">READ MORE</a>
</div>

CSS

.services_bloc {
width: 370px;
background-color: #fff;
}
.button3 {
    border: 2px solid #212121;
    color: #212121;
    display: block;
    width: 150px;
    padding: 5px 0;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
}

пример

1
  • Шутите? У вас в тегах ответ есть))000 Используйте hover, в чем конкретно проблема?
    – ThisMan
    2 мая 2019 в 20:18

1 ответ 1

2

Отличная нетривиальная задачка. Дело в том, что средствами 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 {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: green;
  pointer-events: none;
  z-index: -1;
}
<div class="card">
  <div class="card__info">
    <a class="card__btn">Hover me!</a>
    <div class="card__text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      Odit expedita a voluptatum quibusdam veniam architecto in
      harum sunt ipsum dolore.
    </div>
  </div>
</div>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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