Question

我已经读过关于无法使用伪类更改CSS中的父类，例如：focus，所以我在这里看看我是做错了什么还是有javascript替代。

如果可能的话，我宁愿不使用javascript。

这是我目前的代码：

.box:focus .test{
background: #00FF00;
}

因此，当我在文本框.box中单击时，代码应该将DIV .test的背景更改为绿色。

然而，这不起作用，请有人指出我正确的方向，谢谢。

以下是我的HTML代码片段，这是一个测试页面，因此我可以看到它是如何工作的。

<input name="textfield" type="text" class="box" id="textfield" />

<div class="test" id="test">Content for  id "test" Goes Here</div>

Answer 1

在javascript中，如果您要编写大量的jQuery库，我会安装它。这里有一些jQuery会改变父css：

var parent = $(this).parent()

$('.box').focusin(function(){
    parent.css('background','#00FF00')
}).focusout(function(){
    parent.parent().css('background','transparent')
})

Answer 2

这可以在不使用javascript的情况下实现。确实无法选择父级，但您可以使用css选择兄弟级别。我在这里设置了一个小例子：http://jsfiddle.net/k2dAp/1/

HTML

<div class='container'>
<input type='text' />
<div class='background'></div>
</div>

CSS

.container {
  border: red solid 1px; 
  position: relative;    
}
.background {
  position: absolute;
  background: grey;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;   
}
input {
  margin: 10px;   
}
input:focus + .background {
  background: green;   
}

正如你所看到的，我添加了一个额外的div，它将通过添加绝对定位和z-index作为背景。然后，您可以使用+选择器访问它。这与IE的旧版本不兼容，但在现代浏览器中应该可以正常工作并且可以很好地降级。添加js可能适用于更多的浏览器，但不适用于禁用js的人。

Answer 3

你可以提供更多细节，比如代码片段......

js几乎可以做任何事情所以答案是肯定有一个js替代

Answer 4

你只能通过使用jquery

这样的javascript来做到这一点

$("#textfield").click(function(){
$("#test").css('background-color','#333');
})

在HTML＆amp; CSS可以在关注文本框时更改父DIV的背景吗？

4 个答案: