0

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

    <section class="test">
     <div class="boxes">
      <div class="box first"></div>
      <div class="box second"></div>
      <div class="box third"></div>
     </div>
    </section>

Стили такие:

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    background: #ccc;
    }
    ::-webkit-scrollbar {
    display: none;
    }
    .test {
    display: block;
    margin-top: 10px;
    vertical-align: middle;
    background: #ccc;
    height: 250px;
    }
    .box {
    display: inline-block;
    width: 250px;
    height: 250px;
    background: red;
    }
    .boxes {
    text-align: center;
    }
    .first, .second, .third {
    transition: all 0.5s;
    }
    .first {
    background: #CEFF91;
    }
    .second {
    background: #3AE2CE;
    }
    .third {
    background: #B34EE9;
    }
    .first:hover {
    transform-origin: right top;
    transform: scaleX(2);
    transition: all .5s;
    }
    .first:hover ~ .second {
    transition: all 0.5s;
    }
    .second:hover {
    transform-origin: center center;
    transform: scaleX(2);
    transition: all .5s;
    }
    .second:hover ~ .third {
    background: red;
    transform-origin: left center;
    transform: translate(125px);
    transition: all .5s;
    }

Надо делать так, чтоб при наведении на second и third изменились соответственно first и second, т.е. чтоб работали эти строки:

    .second:hover ~ .first {
    background: red;
    /*др стили*/
    }
    .third:hover ~ .second {
    background: red;
    /*др стили*/
    }

Заранее спасибо

3
  • Вам обязательно через css? 16 июн 2019 в 12:59
  • Спасибо большое! Js ещё изучаю, по этому хотел через css. Но не обязательно, ещё раз спасибо!! 16 июн 2019 в 14:17
  • можете нажать на галочку, что вопрос закрыт :) 16 июн 2019 в 14:32

1 ответ 1

0

document.body.addEventListener('mouseover', () => {
  var target = event.target,
    now;

  if (!target.classList.contains('box')) return;

  if (target.previousSibling.previousSibling) {
    now = target.previousSibling.previousSibling;
  }

  now.classList.add('active')

  target.addEventListener('mouseout', () => {
    now.classList.remove('active')
  })
})
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #ccc;
}

 ::-webkit-scrollbar {
  display: none;
}

.test {
  display: block;
  margin-top: 10px;
  vertical-align: middle;
  background: #ccc;
  height: 250px;
}

.box {
  display: inline-block;
  width: 250px;
  height: 250px;
  background: red;
}

.boxes {
  text-align: center;
}

.first,
.second,
.third {
  transition: all 0.5s;
}

.first {
  background: #CEFF91;
}

.second {
  background: #3AE2CE;
}

.third {
  background: #B34EE9;
}

.first:hover {
  transform-origin: right top;
  transform: scaleX(2);
  transition: all .5s;
}

.first:hover~.second {
  transition: all 0.5s;
}

.second:hover {
  transform-origin: center center;
  transform: scaleX(2);
  transition: all .5s;
}

.active {
  background: red !important;
  transform-origin: left center;
  transform: translate(125px);
  transition: all .5s;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

</head>

<body>
  <section class="test">
    <div class="boxes">
      <div class="box first"></div>
      <div class="box second"></div>
      <div class="box third"></div>
    </div>
  </section>
</body>

</html>

Если я правильно понял вопрос:

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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