如何聚焦輸入標記之外的div div

Question

當輸入標記聚焦時，我無法突出顯示div。 提示：這兩種輸入標籤和我的目標div的不是同一div.Please看到代碼

<div><input type="text"/></div> 
<div>this should change color when input is focused</div> 

Answer 1

喜歡這個？它使用jQuery改變css到div

$('#someInput').on("focus", function(){ 
 
    $("#someDiv").css("color", "red") 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><input id="someInput" type="text" /></div> 
 
<div id="someDiv">this should change color when input is focused</div>

Answer 2

您試圖選擇父...叔叔/阿姨的兄弟姐妹;）
壞消息是：CSS可以」做T它
但是好醇」 JS會做的伎倆

const trigger = document.getElementById("trigger"); 
 
const target = document.getElementById("target"); 
 

 
trigger.addEventListener("focusin", function() { 
 
    target.classList.add("triggered"); 
 
}); 
 
trigger.addEventListener("focusout", function() { 
 
    target.classList.remove("triggered"); 
 
});

.triggered { 
 
    color: red; 
 
}

<div> 
 
    <input id="trigger" type="text" /> 
 
</div> 
 
<div id="target">this should change color when input is focused</div>