Question

当我对输入文本元素进行聚焦时，我想更改提交按钮的背景颜色。

<input id="submit-element" type="submit">
<span><input id="text-element" type="text"></span>

但是，根据元素的当前设置，我相信跨度会阻止它们成为兄弟元素并能够使用~选择器。

那我怎么能做到这一点？是否需要JavaScript？

Answer 1

使用当前的DOM，您将被迫使用javascript。下面是一个jQuery解决方案。

$('input#text-element').focus(function() {
    $('input#submit-element').css('color', 'red');
});

$('input#text-element').focusout(function() {
    $('input#submit-element').css('color', 'black');
});

Answer 2

您必须使用JavaScript，因为DOM受CSS限制。请尝试以下操作，该输入使用onblur和onfocus输入参数：

＆＃13;

.button { 
    padding: 2px 4px;
    font: 13px sans-serif;
    text-decoration: none;
    border: 1px solid #000;
    border-color: #aaa #444 #444 #aaa;
    border-radius: 5px;
    color: #000
}

＆＃13;

<a href="#" class="button" id="submit-element">New Element</a>
<span><input id="text-element" type="text" onfocus="document.getElementById('submit-element').style.backgroundColor = 'red'" onblur="document.getElementById('submit-element').style.backgroundColor = 'inherit'"></span>

＆＃13;

Answer 3

试试这个..

HTML

<input id="submit-element" type="submit">
<input id="text-element" type="text">

的Javascript

document.getElementById("text-element").addEventListener("focus", changeSubmitF);

function changeSubmitF(){
    document.getElementById("submit-element").style.backgroundColor = "#f4f4f4";
}

document.getElementById("text-element").addEventListener("blur", changeSubmitB);

function changeSubmitB(){
    document.getElementById("submit-element").style.backgroundColor = "transparent";
}

查看此Fiddle

在聚焦非相关元素时更改元素的样式

3 个答案: