How to get background color on mouse hover of inactive tab in jquery ui using jquery css framework?

.ui-tabs .ui-tabs-nav  li>A:hover {
    
    background-color:#e7e7e7 !important;

}
.ui-tabs .ui-tabs-nav li:hover {
background-color:#e7e7e7 !important;
}

HTML:

 <div id="tabs" style="border: 1px solid #ffffff; visibility: hidden;"> 
    <ul style="background-color: White; border: 1px solid #ffffff; border-bottom: 1px solid #CCCCCC; background-image: none;"> 
        <li id="liTab1" style="background-color: White;">
            <a href="#tabs1" id="alTab1">abc</a> 
            <span id="spnTab1" class='ui-icon'></span> 
        </li> 
        <li id="liTab2" style="background-color: White;">
            <a href="#tabs2" id="alTab2" >r</a>
            <span id="spnTab2" class='ui-icon'></span>
        </li> 
    </ul>

How to fix the hover on mouse hover?