0

我将下面的代码设置为导航按钮的图标图像。当按钮变为活动状态以插入另一个图标图像时，如何更改此代码？我正在使用 jquery 手机。谢谢

.nav-glyphish-example .ui-btn .ui-btn-inner {
 padding-top: 40px !important; 
}
.nav-glyphish-example .ui-btn .ui-icon { 
width: 30px!important; 
height: 30px!important; 
margin-left: -15px !important; 
box-shadow: none!important; 
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: 0 !important; border-radius: 0 !important; 
}

#home .ui-icon { 
background:  url(glyphish/icons/icons-gray/983-calendarblue@2x.png) 50% 50% no-repeat; 
background-size: 24px 22px; 
}
4

3 回答 3

2 
#home .ui-icon { 
background:  url(normal.png) 50% 50% no-repeat; 
}
#home .ui-icon:active { 
background:  url(active.png) 50% 50% no-repeat; 
}
#home .ui-icon:hover { 
background:  url(hover.png) 50% 50% no-repeat; 
}
于 2012-08-26T22:09:54.667 回答
1

我不确定您对active的确切含义，但是，请看一下:active选择器

于 2012-08-26T22:11:41.560 回答
0

您可以通过 javascript 动态更改 css。
下面的代码将一个函数添加到mousedown与选择器匹配的元素的事件中#home .ui-icon。因此您可以在 mousedown 事件中更改背景图像。

jQuery

$('#home .ui-icon').mousedown(function(){
  $(this).css('background-image','url(newurl)');
});

用您自己的网址替换newurl（例如 glyphish/icons/icons-gray/983-calendarblue@2x.png ）。

于 2012-08-26T21:57:26.560 回答