Question

I wanted to remove this hover effect for buttons, instead i want to change the back color. But couldn’t find any possible css which do that.

Update: I meant the navGrid/inlineNav buttons. “Move” – I meant it kinda look like pixel shift. I added some css to override the existing theme for the grid. If i remove that, the grid works fine. But with my css whenever i hover on any button, it moves to 1 or 2 px left. I’m sure it has something to do with my added CSS. But can’t find which causing this issue.

Any helps is appriciated.

Answer 1

I could not see full CSS which you use because I don’t had all background images which you use. Nevertheless I hope that I could find out the reason of your problem.

In the CSS which you use there are

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover,
.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus
{
    color: #444444;
    border: 0 none;
}

setting. Changing of the border to 0 on hovering following to moving of the icons. If you don’t need the border you can set for example the border-color to transparent instead:

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover,
.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus
{
    color: #444444;
    border-color: transparent;
}