Question

当需要聚焦另一个范围中的输入字段时，我需要使用css更改范围的背景颜色。

<p class="some">
<span class="one">Name</span> 
<span class="two"> <input type="text" name="fname"> </span>
</p>

这是css：

.one
 { background-color: red; }

我试过这样做：

.two:focus + .one
 {background-color-black;}

但它不起作用。

任何帮助将不胜感激。谢谢！

Answer 1

使用javascript：

HTML：

<p class="some">
<span class="one">Name</span> 
<span class="two"> <input type="text" name="fname" onfocus="changeColor()"> </span>
</p>

Javascript：

<script type="text/javascript">
 function changeColor() {
  document.getElementsByClassName("one")[0].style.backgroundColor="black";
 }
</script>

的CSS：

.one
 { background-color: red; }

Answer 2

另一个javascript解决方案，使用类，还处理输入失去焦点：

Sub RenSheets()  
Dim i As Integer  
For i = 2 To Worksheets.Count  
    Sheets(i).Name = Sheets("Sheet names").Range("C" & 2 + i)  
Next i  
End Sub

function getFocus() {
    var one = document.getElementsByClassName("one")[0];
    one.className = one.className + " one-focused";
}

function looseFocus() {
    var one = document.getElementsByClassName("one")[0];
    one.className = one.className.replace("one-focused", "");
}

.one { background-color: red; }
.one-focused { background-color: black; }

这有一些相当明显的缺陷，但在这种情况下有效。您可能希望遍历所有类，或使用id而不是类。如果你正在使用jQuery，那么这会变得稍微简单一些，但我已经使用标准的javascript并且只更改了文档中第一个元素的背景。

Answer 3

如果您不介意元素顺序，请尝试以下代码段：

.one { float: left; }
input[name="fname"] { margin: 0 0 0 5px; }
input[name="fname"]:focus + .one { background: khaki; }

<p class="some">
  <input type="text" name="fname"/>
  <span class="one">Name</span> 
</p>

这是fiddle

在另一个跨度中更改输入焦点上的跨度颜色

3 个答案: