0

I need change button background color on hover input. Changing the color of the button when hovering over the button is not a problem, and when hovering over the input it does not work. What am I doing wrong?

.menu__search {
    height: 60px;
    padding: 0;
    position: relative;
    width: 100%;
}
.menu__search input {
    transition: background 0.5s ease, color 0.3s linear !important;
}
.menu__search input:hover {
    background-color: yellow !important;
    color: black !important;
    box-shadow: inset 0px 0px 3px rgba(0,0,0,0.5);
}

.menu__search input:hover::placeholder {
    font-weight: 500;
    color: green;
}
.menu__search input:hover button {
    background: red;
}
.menu__search button:hover {
    background: red;
}
<div class="menu__search">
    <input id="input_search" type="text" name="search" placeholder="search" class="menu-input">
    <button type="button" id="menu__search-button" class="menu-btn-search>
      <i class="fa fa-search">Search</i>
    </button>
</div>
Alexandr Savrilov
  • 1

2 Answers2

0

You need to use + selector Adjacent sibling combinator for select next element in DOM (without any js)

.menu__search {
    height: 60px;
    padding: 0;
    position: relative;
    width: 100%;
}
.menu__search input {
    transition: background 0.5s ease, color 0.3s linear !important;
}
.menu__search input:hover {
    background-color: yellow !important;
    color: black !important;
    box-shadow: inset 0px 0px 3px rgba(0,0,0,0.5);
}

.menu__search input:hover::placeholder {
    font-weight: 500;
    color: green;
}
.menu__search input:hover + button {
    background: red;
}
.menu__search button:hover {
    background: red;
}
<div class="menu__search">
    <input id="input_search" type="text" name="search" placeholder="search" class="menu-input">
    <button type="button" id="menu__search-button" class="menu-btn-search>
      <i class="fa fa-search">Search</i>
    </button>
</div>
Greg--
  • 636
  • 4
  • 16
0

var ele = document.getElementById("input_search");
ele.addEventListener("mouseenter", function() {
    var button = document.getElementById("menu__search-button");
    button.classList.add("bg");
})

ele.addEventListener("mouseleave", function() {
    var button = document.getElementById("menu__search-button");
    button.classList.remove("bg");
})
.menu__search {
    height: 60px;
    padding: 0;
    position: relative;
    width: 100%;
}
.menu__search input {
    transition: background 0.5s ease, color 0.3s linear !important;
}
.menu__search input:hover {
    background-color: yellow !important;
    color: black !important;
    box-shadow: inset 0px 0px 3px rgba(0,0,0,0.5);
}

.menu__search input:hover::placeholder {
    font-weight: 500;
    color: green;
}
.menu__search input:hover button {
    background: red;
}
.menu__search button:hover {
    background: red;
}

.bg {
  background: pink;
}
<div class="menu__search">
    <input id="input_search" type="text" name="search" placeholder="search" class="menu-input">
    <button type="button" id="menu__search-button" class="menu-btn-search">
      <i class="fa fa-search">Search</i>
    </button>
</div>
Mangesh
  • 365
  • 2
  • 8