1

Пример Как можно корректно реализовать смену фона у родительского блока (отмечен пунктирными линиями) при наведении курсора на синий круг? Напрашивается сделать общий фон картинку с отдельными участками измененных областей для режима hover родительских блоков. Как корректно сделать привязку кругов и родительских фонов?

Смысл в том, что при наведении на фоне появляются изменения. Разметка изначальная:

<ul class="picture">
  <li class="block-link1">
    <a href="#">
      <img class="icon-link" src="" />
    </a>
  </li>
  <li class="block-link2">
    <a href="#">
      <img class="icon-link" src="" />
    </a>
  </li>
  <li class="block-link2">
    <a href="#">
      <img class="icon-link" src="" />
    </a>
  </li>
</ul>

1
  • Добавьте ваш код.
    – MihailPw
    21 мая 2017 в 8:35

2 ответа 2

2

Вариант на css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.picture {
  height: 100vh;
  position: relative;
}

.picture-link {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 99;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin-top: -25px;
  background: #00f;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  transition: .3s;
}

.picture-link:nth-of-type(2) {
  left: 50%;
  margin-left: -25px;
}

.picture-link:nth-of-type(3) {
  left: auto;
  right: 0;
}

.picture-link:hover {
  background: tomato;
}

.picture-image-1 {
  background-image: url(http://frederictoncrc.com/new/img/slider/background1.jpg);
}

.picture-image-2 {
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZ4xNwMCTfSlR9FTehxEV51nJ4SNOKwfURcQj_2_iueAXX0u2b);
}

.picture-image-3 {
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToVzpCM0crGK5g9ErwxtlHwv9RAUBwcjWHYjmVGfYf36D4zNotBA);
}

.picture-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  background-color: #ccc;
  background-size: cover;
  opacity: 0;
  transition: opacity .3s;
}

.picture-image-1,
.picture-link:nth-of-type(1):hover~.picture-image-1,
.picture-link:nth-of-type(2):hover~.picture-image-2,
.picture-link:nth-of-type(3):hover~.picture-image-3 {
  opacity: 1;
}
<div class="picture">
  <a href="#" class="picture-link">link 1</a>
  <a href="#" class="picture-link">link 2</a>
  <a href="#" class="picture-link">link 3</a>
  <div class="picture-image picture-image-1"></div>
  <div class="picture-image picture-image-2"></div>
  <div class="picture-image picture-image-3"></div>
</div>

8
  • Спасибо! Вопрос: .picture-link:nth-of-type(1):hover~.picture-image-1 это работает я так понимаю не на всех браузерах?
    – Sylon
    21 мая 2017 в 9:34
  • '~' работает по ie7 включительно; nth-of-type(1) - по ie9 включительно. Данный пример будет работать по ie9 включительно.
    – soledar10
    21 мая 2017 в 9:39
  • Интересный приём! А в других Edge, Opera, Firefox?
    – Sylon
    21 мая 2017 в 9:43
  • Да будет работать во всех современных браузерах
    – soledar10
    21 мая 2017 в 9:45
  • 1
    правые соседи: все .picture-image на том же уровне вложенности, которые идут после .picture-link. Но т.к нам нет необходимоcти выбирать все изображения при наведении на ссылку - добавляем nth-of-type, чтобы конкретно указать, что мы должны выбрать при наведении. Да если ссылки поместить в блок (прямой родитель), а изображения будут находится вне этого родителя - этот вариант работать не будет.
    – soledar10
    21 мая 2017 в 9:59
1

Если я правильно понял, то вам следует использовать .hover():

$(".link").hover(
  e => {
    $(e.target).parent().css("background-color", "yellow");
  },
  e => {
    $(e.target).parent().css("background-color", "black");
  });
.dynamic-background {
  background-color: black;
  width: 200px;
  height: 200px;
}

.link {
  background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dynamic-background">
  <a class="link">Link</a>
</div>

3
  • Благодарю! А в таком варианте я могу использовать единую картинку со всеми вариациями фона, а вместо "background-color", "black" будет указываться положение нужного участка? Вот этот вариант нужен (использование изображения карты). Не могу найти как это делается, хотя часто вижу, что используют этот приём.
    – Sylon
    21 мая 2017 в 8:58
  • @Agestor добавьте ваш код, включая стили и ссылки на требуемые картинки
    – MihailPw
    21 мая 2017 в 9:01
  • Скажите, пожалуйста, метод (часть кода) я потом готовый шаблон включу в вопрос, просто это в фотошопе нужно карты рисовать.
    – Sylon
    21 мая 2017 в 9:35

Ваш ответ

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

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