将鼠标悬停在另一个元素上仅使用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>

就像当我悬停在button所有input变化的边框颜色时.我只想用css no 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>

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

〜组合器分离两个选择器,并且仅当第二个元素前面有第一个元素时才匹配第二个元素,并且它们共享一个公共父元素.

更多这里

这是底部的按钮,因为你可以看到它不起作用.

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>