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=属性的标签。例如，如果我尝试悬停电子邮件输入，则会在input:hover+label的第二个标签上应用for="firstname"效果。

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

有没有解决方案？

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

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

3 个答案: