2

我已经阅读了关于无法使用伪类（例如 :focus）更改 CSS 中的父级的信息，所以我在这里看看我是否做错了什么或者是否有 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>
4

4 回答 4

3

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

var parent = $(this).parent()

$('.box').focusin(function(){
    parent.css('background','#00FF00')
}).focusout(function(){
    parent.parent().css('background','transparent')
})
于 2012-08-18T23:15:13.337 回答
3

这实际上是可能的，无需使用 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 的人。

于 2012-08-18T23:59:18.840 回答
2

您能否提供更多详细信息，例如代码片段等...

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

于 2012-08-18T22:34:42.003 回答
2

你只能通过像这样使用 jquery 的 javascript 来做到这一点

$("#textfield").click(function(){
$("#test").css('background-color','#333');
})
于 2012-08-18T22:42:18.367 回答