聚焦输出/模糊背景位置？

Question

我有一个带类的输入字段。在焦点上，bg图像位置发生变化。但是我需要在关注焦点后重新回到这个位置。

任何方式这样做？可能有一些js？

css

.login-day{width: 68px; height:48px; line-height: 48px; background: url(/assets/templates/img/dd.jpg) 0 0 no-repeat transparent;}

.login-day:focus{background-position: -68px 0;}

.login-day:focus-out???{background-position: 0 0;}

HTML

<input class="login-day" type="text" name="date" />

小提琴：http://jsfiddle.net/fourroses666/9Q6nN/1/

---

解决：http://jsfiddle.net/fourroses666/9Q6nN/4/

Answer 1

要将位置再次重置为上一个位置，请使用悬停而不是焦点。试试这个

.login-day{width: 68px; height:48px; line-height: 48px; background: url(/assets/templates/img/dd.jpg) 0 0 no-repeat transparent;background-position: 0 0;}

.login-day:hover{background-position: -68px 0;}

通过jquery也是可能的

<input class="login-day" type="text" name="date" onfocus="$('.login-day').css('background-position','-68px 0px');" onblur="$('.login-day').css('background-position','0px 0px');" >