Нужно изменить цвет одного объекта при наведении на другой

Question

Обычный вид поиска Текст При наведении на него Нужно чтобы было так

Мне нужно, чтобы когда человек наводил курсор на input(search), менял цвет обводки не только он, но и div'ы(vector и vector1) свой цвет

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Сотрудники</title>
    <link rel="stylesheet" href="main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet"> 
    <script src="script.js?v=1"></script>
</head>
<body>
    <div class="search" id="searchWrapper">
        <input type="search" id="search">
        <div class="vector1"></div>
        <div class="vector"></div>
    </div>
    <div class="wrapper">
        <ul class="userList">

        </ul>
    </div>
</body>
</html>

body {
    background: #FFFFFF;
}

#search {
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 1180px;
    height: 52px;
    left: 0; 
    right: 0;
    margin-left: auto; 
    margin-right: auto; 
    top: 53px;
    background: #FFFFFF;
    border: 1px solid #E4EEF0;
    border-radius: 50px;
    padding: 20px;
    font-size: 25px;
}

#search:hover {
    border: 1px solid #B049D4;
}

div.vector1 {
    position: absolute;
    width: 17.78px;
    height: 17.8px;
    left: 1500px;
    top: 66px;
    border-radius: 15px;
    border: 3px solid #B049D4;
}

div.vector {
    position: absolute;
    width: 8.84px;
    height: 1.85px;
    left: 1520.16px;
    top: 88.8px;
    background: #B049D4;
    transform: rotate(45deg);
    border-radius: 2px;
    border: 1px solid #B049D4;
    right: 0;
}

Answer 1

Пожалуйста, я подправил код как надо.

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

body {
  background: black;
}

.search {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  margin-top: 50px;
}

#search {
  width: 100%;
  height: 52px;
  background: #ffffff;
  border: 1px solid #e4eef0;
  border-radius: 50px;
  padding: 20px;
  padding-right: 40px;
  font-size: 25px;
}

#search:hover {
  border: 1px solid #b049d4;
}

#search:hover+div.vector1 {
  border: 3px solid #282828 !important;
}

#search:hover+div.vector1+div.vector {
  border: 1px solid #282828 !important;
}

div.vector1 {
  position: absolute;
  width: 17.78px;
  height: 17.8px;
  right: 40px;
  top: 12px;
  border-radius: 15px;
  border: 3px solid #b049d4;
}

div.vector {
  position: absolute;
  width: 8.84px;
  height: 1.85px;
  right: 34px;
  top: 31px;
  background: #b049d4;
  transform: rotate(45deg);
  border-radius: 2px;
  border: 1px solid #b049d4;
}

<body class="main">
    <div class="search" id="searchWrapper">
        <input type="search" id="search">
        <div class="vector1"></div>
        <div class="vector"></div>
    </div>
    <div class="wrapper">
        <ul class="userList">
        </ul>
    </div>
</body>

БЛОГ НА HUSL

Нужно изменить цвет одного объекта при наведении на другой

Ответы (1 шт):