输入为焦点时更改背景位置div

Question

我正在用像标签这样的图像构建表单......

我有：

DIV.icon-phone {
    width: 22px
    height: 22px
    background: url('icon-set.png') no-repeat 22px 66px;
}

INPUT.pool-phone {
    border:1px solid #666;
}

我会这样： 如果INPUT.pool-phone：焦点改变DIV.icon-phone背景位置：44px 66px

请帮忙。

Answer 1

为了在修改另一个元素时改变元素的某些css属性，你需要有特定的结构..

对于您的示例，input元素必须与div共享同一个直接父级，并且也必须位于层次结构中。

在这种情况下，您可以使用~ General sibling combinator定位

.pool-phone:focus ~ .icon-phone{
   background-position:...
}

演示 http://jsfiddle.net/gaby/fx5Uy/

---

否则你可以使用javascript并绑定到onfocus事件..

Answer 2

你可以编写一个javascript函数来为你处理。

[the input button].onfocus = function changeBg () { [thediv].style.background="[whatever you want]" };
[the input button].onblur = function resetBg () { [thediv].style.background="[whatever you want]" };

Gaby发布了一个纯css版本，这是最好的（至少对我而言）。