css - 输入焦点时更改背景位置 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:focus 将 DIV.icon-phone 背景位置更改为：44px 66px

请帮忙。

Answer 1

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

对于您的示例，该input元素必须与 the 共享相同的直接父级，div并且在层次结构中位于它之前。

在这种情况下，您可以使用~General 同级组合器来定位它

.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 版本（至少对我而言）。