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

嗨，这是一个非常基本的问题，我只想知道当悬停在一个元素上时，其他元素的样式会发生变化，我如何才能做到这一点

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

输入号码：
结果:
提交

就像我将鼠标悬停在

按钮上时，所有
输入的边框颜色都会发生变化。
我只希望使用cssnojs或jQuery
作为纯css解决方案，您需要将
-标记移动到您想要更改的输入之前，然后它就会这样工作


按钮：悬停~。表单组输入{
边框颜色：红色；
}

提交
输入号码：
结果:
可以执行此操作，但不能使用当前代码

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


按钮：悬停~div输入{
边框：1px纯红；
}

提交
输入号码：
结果:
仅当按钮后的输入

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

之后，您可以使用按钮的绝对位置
这是演示
试试这个

<form id="numerical" class="row">
  <label for="btn" class="label"></label>
  <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>

<style>#numerical{
  position: relative;
}
.form-group {
    margin-bottom:10px;
}
#numerical .label {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 32px;
  width:102px;
}
.label:hover ~ .form-group input {
  border: solid 2px red;
}
#btn{
    background:blue;
    color:#fff;
    height:30px;
    width:100px;
}   </style>


输入号码：
结果:
提交
#数字的{
位置：相对位置；
}
.表格组{
边缘底部：10px；
}
#数字标签{
位置：绝对位置；
底部：0；
左：0；
高度：32px；
宽度：102px；
}
.label:hover~.form组输入{
边框：实心2px红色；
}
#btn{
背景：蓝色；
颜色：#fff；
高度：30px；
宽度：100px；
}   

要做到这一点，您需要JavaScript。在纯CSS中，这是不可能的，除非您将按钮作为表单的第一个子项，并使用提供的解决方案将按钮放置在HTML代码中表单字段之前，然后您需要在表单字段下方直观地移动按钮<代码>显示：表格标题
即使对我来说也有点粗糙，但在IE10+中你可以使用。在一半的浏览器中，标签顺序（键盘用户）仍然是按钮，然后是字段，这将是一个可访问性问题
<form id="numerical" class="row">
  <label for="btn" class="label"></label>
  <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>

<style>#numerical{
  position: relative;
}
.form-group {
    margin-bottom:10px;
}
#numerical .label {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 32px;
  width:102px;
}
.label:hover ~ .form-group input {
  border: solid 2px red;
}
#btn{
    background:blue;
    color:#fff;
    height:30px;
    width:100px;
}   </style>