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

时间:2013-06-21 11:52:01

标签: javascript css onblur onfocus

我有一个带类的输入字段。在焦点上,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/

1 个答案:

答案 0 :(得分:2)

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

.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');" >