html - 使用 CSS 在输入 div 的焦点上更改 span div 的 CSS

Question

我想在输入类型的焦点上更改 span div 的背景图像。我试图用适当的父类进行更改，但它对我不起作用。任何帮助，将不胜感激。这是我的代码。

.enq-form-section input[name='treat-cat']:hover .enq-form-section .enq-form .tc-img {
  background: #ccc !important;
}

<div class="form-group">
  <span class="tc-img"></span>
  <input type="text" class="form-control" placeholder="Treatment Category" name="treat-cat">
</div>

Answer 1

你能改变 span 和 input 元素的写入顺序吗？如果是这样，那就太容易了。这是一个例子。

.form-control:hover + .tc-img,
.form-control:focus + .tc-img {
  background: red;
}

<div class="form-group">
  <input type="text" class="form-control" placeholder="Treatment Category" name="treat-cat">
  <span class="tc-img">SOME CONTENT IN HERE</span>
</div>

信息

CSS 使得无法选择先前的元素或父元素。 It does it for a reason .

如果您无法更改标记，那么您将不得不使用 JavaScript 来定位前一个元素。

假设您有 jQuery，您将执行以下操作。

jQuery(".form-control")
.on("focus", function(){
    // set background color on focus
    $(this).prev().css("backgroundColor","tomato");
})
.on("blur", function(){
    // remove background color on blur
    $(this).prev().css("backgroundColor","none");
});