如何将鼠标悬停在整个按钮上

Question

当我将鼠标悬停在整个按钮上时，我希望它显示在整个按钮上。由于该按钮具有背景图像，因此我无法正确执行此操作。该按钮看起来像这些：

的CSS似乎是这样的：

#tablist{ 
    padding: 0px auto 0px auto; 
    height: 32px; 
} 

#tablist li{ 
    display: block; 
    width: 150px; 
    height: 35px; 
    float: left; 
    border-radius: 7px; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    margin: 0px auto 0px auto; 
    text-align: center; 
    padding-top: 5px; 
    cursor: hand; 
    cursor: pointer; 
} 

#tablist ul:hover{ 
background-color: red; 
} 

.tablink{ 
    text-decoration:none; 
} 

.locked{ 
    background: url('../img/DashboardButtonsLocked.png') no-repeat; 
    background-position:5px -85px; 
} 
.unlocked{ 
    background: url('../img/DashboardButtonsLocked.png') no-repeat; 
    background-position:4px -2px; 
} 

如何纠正呢？需要一些指导。

Answer 1

尝试悬停重写background属性：

#tablist ul:hover{ 
    background: red; 
} 

这里是一个演示：http://jsfiddle.net/taQfU/

Answer 2

嘿，我想你应该给#tablist li:hover

由于这样

#tablist li:hover{ 
background-color: red; 
}