css - 悬停时无法更改按钮

Question

我有两组按钮。第一组用于导航，第二组用于下载和信息。第一组工作正常，第二组也工作正常，但是当我将鼠标悬停在这些按钮上时，我无法更改这些按钮。这是我用于第二组的代码(这组用于书籍封面):

.book_covers li .btn1,
ul li .btn2{
border-radius: 10px;
background-color: #E77600;
cursor: pointer;
width: 41%;
height: 22.5%;
padding: 0%;
float: left;
text-decoration: none;
color: #fff;
text-align: center; 
font-size:80%;
cursor:pointer;
-webkit-box-shadow: inset 1px 1px 5px 2px #733B00;
box-shadow: inset 1px 1px 11px 2px #733B00;
-webkit-transition-duration:0.4s /*safari*/
transition-duration: 0.4s;.book_covers li .btn1 {
margin:0% 2% 4% 6%;
}
.book_covers li .btn2{
 margin:0 5% 5% 1.5%;
}
.book_covers li .btn1 :hover {
background-color: #FFF;
color: #666;
}
.book_covers li .btn2 a:hover {
background-color: #FFF;
color: #666;
}

使用它们的页面是:[链接] ( http://www.hoddenbagh.nl/bibleopen/subjects_eBooks.html )

Answer 1

谢谢你们的回复，但我找到了解决这个问题的方法:

.book_covers li .btn1:hover {
background-color: #FFF;
color: #000;
}
.book_covers li .btn2:hover {
background-color: #FFF;
color: #000;
}