0

Необходимый эффект: при наведении на круг фон всех 4 блоков принимает такой же цвет, как и фон круга. Как это сделать?

#blocks {
  position: relative;
}
.block {
    display: inline-block;
    outline: 1px dashed #000;
    width: 48%;
    height: 50px;
    margin: 3px;
    text-align: center;
    transition: all linear 1s;
}
.circle {
    background: black;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 10px auto;
}
.circle:hover {
  background: gray;
}
<div id="blocks">
  <div class="block">Blog</div>
  <div class="block">Projects</div>
  <div class="block">Work tools</div>
  <div class="block">CV</div>
</div>
<div class="circle"></div>

2
  • Использовать JS =)
    – RifmaMan
    7 мая 2018 в 10:35
  • Без JS нужно!!!
    – Alex
    7 мая 2018 в 10:37

1 ответ 1

2

Используйте flex Ставьте circle выше, и через order перекидывайте вниз. Далее через соседний селектор

.wrapper {
  display: flex;
  flex-wrap: wrap
}
#blocks {
  position: relative;
  width: 100%;
}
.block {
    display: inline-block;
    outline: 1px dashed #000;
    width: 48%;
    height: 50px;
    margin: 3px;
    text-align: center;
    transition: all linear 1s;
}
.circle {
    order: 2;
    background: black;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 10px auto;
}
.circle:hover {
  background: gray;
}

.circle:hover + #blocks .block {
  background: gray;
}
<div class="wrapper">
  <div class="circle"></div>
  <div id="blocks">
    <div class="block">Blog</div>
    <div class="block">Projects</div>
    <div class="block">Work tools</div>
    <div class="block">CV</div>
  </div>
</div>

2
  • Что ж ты опередил меня:(
    – Zicrael
    7 мая 2018 в 10:43
  • бывает всякое... ) 7 мая 2018 в 10:50

Ваш ответ

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

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