输入时更改按钮背景颜色：悬停[重复]答案

【问题标题】：Change Button background-color when input:hover [duplicate]输入时更改按钮背景颜色：悬停[重复]
【发布时间】：2021-08-27 05:00:45
【问题描述】：

我需要在悬停输入时更改按钮背景颜色。将鼠标悬停在按钮上时更改按钮的颜色不是问题，而将鼠标悬停在输入上时则不起作用。我做错了什么？

.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>

【问题讨论】：

标签： html css button input hover

【解决方案1】：

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>

【讨论】：

我添加了类 bg 并在鼠标离开时删除。您可以添加任何背景颜色。目前我已经添加了粉红色
有什么不喜欢的理由吗？

【解决方案2】：

你需要使用+选择器Adjacent sibling combinator来选择DOM中的下一个元素（没有任何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>

【讨论】：