Question

我想创建一个漂亮的登录屏幕。我的问题是，当我将鼠标悬停在用户名输入上时，我想更改登录文本的颜色。

例如。有一个带有“登录”内容的h1文本。当我将鼠标悬停在“文本”下方的“输入”上时，我希望文本更改颜色

Answer 1

不幸的是，您不能使用CSS选择另一个父元素。您唯一可以做的就是在悬停时设置现有元素，子元素或同级元素的样式。

例如，如果H1文本紧接在您悬停的输入之后，则可以执行以下操作：

input:hover + h1 {
  color: red;
}

或者，如果将两个元素都放入div并更改要在div悬停时触发的悬停效果，则只需执行以下操作：

div:hover h1 {
  color: red;
}

Answer 2

您可以使用JavaScript在鼠标悬停事件上执行此操作。

<h1 id="login">Login</h1>
<p>Username: <input type="text" onmouseover="changeLoginColor()"></p>

<script>
let login = document.getElementById("login");
function changeLoginColor(){
    login.style.color = "red";
}
</script>

Answer 3

CSS完全不可能做到这一点。您无法更改当前元素之前的元素的样式，因为它是级联的。但是，您可以定位一个可以设置样式以显示在输入之前的兄弟姐妹。

<div class="input-container">
  <input type="text" id="name" />
  <label for="name">Name</label>
</div>

.input-container {
  position: relative;
}
.input-container input {
  margin-top: 16px;
}
.input-container label {
  position: absolute;
  left: 4px;
}
.input-container input:hover + label {
  color: red;
}

jsfiddle：https://jsfiddle.net/xeu4aszL/

更改CSS中元素的颜色

3 个答案: