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

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

〜组合器分离两个选择器并匹配第二个选择器元素只有在第一个元素之前，并且两者共享一个共同元素父节点。

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>

Answer 2

对于纯css解决方案，您需要在要更改的输入前移动<button> - 标记，但它会像这样工作

button:hover ~ .form-group input {
    border-color: 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>

Answer 3

仅在按钮

之后的输入时才有可能

[1,2,3]

和css：

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

之后，您可以使用按钮的绝对位置这是演示 http://jsfiddle.net/u7tYE/6037/

Answer 4

try this

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

Fiddle

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

4 个答案: