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

Question

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

.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 使得无法选择以前的元素或父元素。它这样做是有原因的。

如果您无法更改标记，则必须使用 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");
});

Answer 2

提供如此少量的 html 很难理解 css。 我可以告诉你的是，你试图做的事情不能用css完成。 使用悬停状态时，它们仅适用于悬停在的项目或其子项上。 不能在元素上放置悬停状态，然后尝试编辑其父级或同级。

你正在尝试做的事情需要通过javascript来完成。 尝试将 mouseOver 事件与更改范围背景图像的函数的值一起使用。

鼠标悬停引用：http://www.w3schools.com/jsref/event_onmouseover.asp