Question

例如，如果我有很多这样的话：

<div class="form-group">
  <div class="col-xs-2"><label for="USER_FORM___unique_id" class="control-label">Employee ID</label>  </div>  
  <div class="col-xs-5"><input disabled="disabled" type="text" class="form-control" id="USER_FORM___unique_id__orig" value="20141100497">  </div>  
  <div class="col-xs-5"><input type="text" class="form-control" id="USER_FORM___unique_id" value="20141100497">  </div> 
</div>
<div class="form-group">
  <div class="col-xs-2"><label for="USER_FORM___name" class="control-label">Name</label>  </div>  
  <div class="col-xs-5"><input disabled="disabled" type="text" class="form-control" id="USER_FORM___name__orig" value="20141100497">  </div>  
  <div class="col-xs-5"><input type="text" class="form-control" id="USER_FORM___name" value="Me me me me">  </div> 
</div>
<!-- and so on -->

我想在父div.form-group上添加边框，仅在最后一个input.col-xs-5聚焦/悬停
或仅在其引用聚焦/躲避的for属性时突出显示label.control-label

是否可以仅使用CSS来执行此操作？

我知道使用jQuery可以通过在最后一个输入上添加onfocus="highlight(this)"，onblur="highlight(this)"，onmouseenter="highlight(this)"和onmouseleave="highlight(this)"来实现这一点：

function highlight(el) {
  el = $(el);
  var focused = el.is(":focus");
  var style1 = focused ? '1px solid blue' : '';
  $(el).parent().css('border',style1); // 1
  var style2 = focused ? 'underline' : '';
  $(el).prev().prev().css('text-decoration',style2); // 2
}

Answer 1

[这是一个黑客，但是有效]

如果您可以更改标记，则可以在div之后添加input.form-control，并将父样式模拟为div而不是父级div.form-group。例如：

＆＃13;

.form-group {
    position: relative;
    border:1px solid blue;
    display:inline-block;
    padding:20px;
}
.form-control:focus + div {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    border:1px solid red;
}

＆＃13;

<div class="form-group">
    <div class="col-xs-2"><label for="USER_FORM___name" class="control-label">Name</label></div>
    <div class="col-xs-5"><input disabled="disabled" type="text" class="form-control" id="USER_FORM___name__orig" value="20141100497" /></div>
    <div class="col-xs-5">
        <input type="text" class="form-control" id="USER_FORM___name" value="Me me me me" />
        <div></div> <!-- additional markup -->
    </div>
</div>

＆＃13;

如何仅使用CSS将样式添加到活动输入的上一个兄弟

1 个答案: