css - 将鼠标悬停在一个元素上，仅使用 css 更改另一个元素

Question

嗨，这是一个非常基本的问题，我只想知道当鼠标悬停在一个元素上时，其他元素的样式会发生变化，我该如何实现这一点？

<form id="numerical" class="row">
  <div class="form-group row">
    <label>Enter Number :</label>
    <input type="text" id="tel">
  </div>
  <div class="form-group row">
    <label>Result :</label>
    <input type="text" id="result">
  </div>
  <button type="submit" id="btn" class="row">Submit</button>
</form>

就像我将鼠标悬停在所有 input 更改的 button 边框颜色上一样。 我只想要 css 没有 js 或 jQuery。

Answer 1

可以这样做，但不能使用您当前的代码。

下面是这个工作的代码，悬停元素必须在你想要改变的元素之前。它的工作原理是向下而不是向上，因此如果此按钮位于底部，您将无法看到相同的效果，因为该效果不会影响已呈现的元素。

button:hover ~ div input {
  border: 1px solid red;
}

<form id="numerical" class="row">
  <button type="submit" id="btn" class="row">Submit</button>
  <div class="form-group row">
    <label>Enter Number :</label>
    <input type="text" id="tel">
  </div>
  <div class="form-group row">
    <label>Result :</label>
    <input type="text" id="result">
  </div>
</form>

我们可以使用~选择器选择其他元素的兄弟。

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

More here

---

这是底部的按钮，如您所见，它不起作用。

button:hover ~ div input {
  border: 1px solid red;
}

<form id="numerical" class="row">
  <div class="form-group row">
    <label>Enter Number :</label>
    <input type="text" id="tel">
  </div>
  <div class="form-group row">
    <label>Result :</label>
    <input type="text" id="result">
  </div>
  <button type="submit" id="btn" class="row">Submit</button>
</form>