输入 CSS 悬停状态之前的 HTML 标签

Question

我有一个表单，我将标签放在这样的输入之前：

<label for="email">Confirm Email</label>
<input type="text" id="email" />
<label for="firstname">First Name</label>
<input type="text" id="firstname" />
<label for="lastname">Last Name</label>
<input type="text" id="lastname" />
<label for="company">Company</label>
<input type="text" id="company" />

当我尝试使用 CSS 设置标签样式时，当我将输入像这样 (input:hover + label) 悬停时，CSS 将应用于下一个标签，而不是具有 for= 属性的标签。例如，如果我尝试悬停电子邮件输入，它将在带有for="firstname" 的第二个标签上应用input:hover+label 效果。

我的设计结构顶部有标签，下面有输入，所以我无法切换它们的位置。

有什么解决办法吗？

Answer 1

通过一些巧妙的 CSS，您可以在输入之后添加标签，但标签仍然看起来像在输入上方 http://jsfiddle.net/8YqN2/2/

<input type="text" id="email" />
<label for="email">Confirm Email</label>    
<input type="text" id="firstname" />
<label for="firstname">First Name</label>    
<input type="text" id="lastname" />
<label for="lastname">Last Name</label>    
<input type="text" id="company" /> 
<label for="company">Company</label>

CSS

input:hover + label  {
  background-color: #eee;
}

input {
  position: relative;
  display: block;
  margin-top: 1.5em;
}

label {
  display: block;
  position: relative;
  top: -2.5em;
}

我认为单独使用 CSS 是不可能的，如果您可以忍受启用 JS 的用户的效果，您可以使用以下内容。 http://jsfiddle.net/8YqN2/1/

$('input').hover(
  function(){
    $(this).prev().addClass('hover');
  },
  function(){
    $(this).prev().removeClass('hover');
  }
);

label.hover  {
  background-color: #eee;
} ​

​

Answer 2

你做错了。 “+”号是“adjacent sibling selector”。

选择器匹配第一个元素的下一个兄弟元素。

在您的情况下，选择器匹配 label 元素，该元素是 input:hover 的下一个兄弟元素。

CSS 不关心for 属性，它关心id、class 和元素的层次结构。

你还没有提到你想要完成什么，但试一试：

HTML

<label for="email">Confirm Email<input type="text" id="email" /></label>
<label for="firstname">First Name<input type="text" id="firstname" /></label>
<label for="lastname">Last Name<input type="text" id="lastname" /></label>
<label for="company">Company<input type="text" id="company" /></label>

CSS

label:hover { /* something */ }

如果需要，将“标签”文本包装在 <span> 标记中。

Answer 3

希望对你有帮助

<div class="nina">
    <label for="email" id="em">Confirm Email</label>
    <input type="text" id="email" onmouseover="document.getElementById('em').style.color='red'" onmouseout="document.getElementById('em').style.color='black'" />
    <label for="firstname">First Name</label>
    <input type="text" id="firstname" />
    <label for="lastname">Last Name</label>
    <input type="text" id="lastname" />
    <label for="company">Company</label>
    <input type="text" id="company" />

</div>

这个没有 jquery