使用CSS影响其他外部元素

Question

我想给第一个元素附加一个焦点事件监听器，当它触发时，第二个元素的边框将是红色的。

第一个元素在第二个元素的内部。

:我不能将事件监听器附加到第一个元素，因为javascript/jQuery执行时它不存在。

为什么?:第一个元素加载页面加载后,因为我在我的网站上使用长轮询。

因为这个，我试图使用jQuery.ready方法，但它没有工作，因为.ready火灾太早。第一个元素在.ready触发后很长时间才加载(javascript/jQuery执行仍然太快)。

之后，我尝试使用CSS (CSS不关心元素是否存在，它工作时，元素加载后CSS加载)，但我发现只有这个:当一个元素悬停时如何影响其他元素

在上一页中，只有当第二个元素在第一个元素内部或它们是兄弟元素时，才能使用CSS来解决这个问题。在我的例子中，第二个元素在第一个元素的外面，所以我不能使用CSS。你觉得呢?

Answer 1

这应该会给你一个想法。

你可以使用.parentNode

访问JS中的父元素你应该把这个JS添加到你的网站中，当你创建"first"元素，设置为:onfocus="parentStyle(this)"和onblur="parentStyleBack(this)"。

let bf;
function parentStyle(el) {
parent = el.parentNode;
bf = parent.style.border;
parent.style.border = "2px solid #FF0000";
}
function parentStyleBack(el) {
parent = el.parentNode;
parent.style.border = bf;
}

#outside {
width: 300px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
#inside {
width: 120px;
height: 20px;
}

<div id="outside">
<input id="inside" onfocus="parentStyle(this)" onblur="parentStyleBack(this)" placeholder="Click here to focus">
</div>

Answer 2

如果你的结构允许，那么它可以看起来只使用CSS。

要求外部元素可以指定位置，但内部元素和任何中间元素不能指定位置。

这样，inner的伪before元素就可以具有outer的尺寸，从而提供边框。

.outer {
width: 50vmin;
height: 50vmin;
background-color: lime;
position: relative;
padding: 0;
margin: 0;
}
.inner {
width: 30vmin;
height: 30vmin;
background-color: cyan;
margin: 0 auto;
}
.inner:hover::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border: solid 5px red;
top: -5px;
left: -5px;
padding: 0;
margin: 0;
}

<div class="outer">
<div class="inner">Hover over me</div>
</div>