Javascript CSS：将父对象更改为子对象的焦点

比如说你有这样的东西：

<div class="parent">
    <input class="childInput" type="text" />
    <div class="sibling"></div>
</div>

我想在孩子接收焦点时更改父母/兄弟姐妹的外观。做这样的事情有什么CSS技巧吗

编辑：

我提出问题的原因如下：

我正在创建一个需要可编辑文本字段的Angular应用程序。它应该看起来像一个标签，直到它被点击，在这一点上，它应该看起来像一个正常的文本输入。我根据：focus设置了文本字段的样式以实现此效果，但文本被文本输入的边界切断。我还使用了ng show、ng hide、ng blur、ng keypress和ng click来根据模糊、按键和单击在标签和文本输入之间切换。除了一件事之外，这一切都很好：在标签的ng click=“setEdit（This$event）”将ng show和ng hide使用的编辑布尔值更改为true后，它使用jQuery调用.select（）文本输入。但是，直到ng单击完成后，所有内容都是$digest'd，因此文本输入再次失去焦点。由于文本输入从未实际接收到焦点，因此使用ng blur恢复显示标签是错误的：用户必须单击文本输入，然后再次单击退出，以恢复显示标签

编辑：

---

这里有一个问题的例子：

没有机会使用CSS实现这一点。CSS只能设置兄弟姐妹、孩子等的样式，而不能设置父母的样式

您可以像这样简单地使用JS：

<style>
.parent {background: green}
.focused {background: red;}
</style>
<div class="parent">
    <input class="childInput" type="text" />
    <div class="sibling"></div>
</div>

<script>
$('.parent > *')
    .focus(function() {
        $('.parent').addClass('focused');
    })
    .blur(function() {
        $('.parent').removeClass('focused');
    });
</script>

.parent{背景：绿色}
.focused{背景：红色；}
$（'.parent>*'）
.focus（函数（）{
$（'.parent'）.addClass（'focused'）；
})
.blur（函数（）{
$（'.parent'）.removeClass（'focused'）；
});

---

此代码获取

.parent

的所有直接子级，如果您聚焦其中一个，则类

聚焦的

将添加到父级。在“模糊”中，该类将被删除。

您可以使用纯CSS使文本输入看起来不是文本输入，除非它处于焦点位置

---

尝试contenteditable属性。然而，这可能需要更多的工作才能将其转换为可用的表单数据

点击我

您现在可以在纯CSS中执行此操作，因此不需要JavaScript JavaScript是没有选择的？这不能仅使用CSS来完成，您需要使用js。确实如此，但我很好奇是否可以通过样式化来完成。我将添加一个编辑以了解我的问题的原因。仅使用CSS无法完成父匹配。仅当元素与定义元素相邻时，才能进行同级匹配。看，看，这是同样的问题谢谢你的回答。我添加了一个关于我的问题原因的编辑：我想在焦点/模糊上的标签和输入之间切换，但在角度上有一些问题。这不是普通的JS，这是使用jQuery。谢谢。实际上，我试过了，但遇到了一些问题：“……我根据：focus设置了文本字段的样式，以实现这种效果，但文本被文本输入的边界切断了……”。显示省略号肯定比剪辑好，但如果可能的话，我希望看到整个过程。我刚才问的一个相关问题是：，如果你感兴趣的话。当然有用。不幸的是，我们的客户端需要使用非HTML5兼容的浏览器。真是太神奇了！我应该被踢走。R.I.Sphere的浏览器支持：哇！我没有注意到。对不起。@AnuragHazra没问题。我更新了这篇文章，使它现在更清晰，并加入了浏览器支持表的图像。

input[type="text"] {
    border-color: transparent;
    transition-duration: 600ms;
    cursor: pointer;
    outline-style: none;
    text-overflow: ellipsis;
}

input[type="text"]:focus {
    border-color: initial;
    cursor: auto;
    transition-duration: 300ms;
}

<span class="parent" contenteditable>Click me</span>