悬停时无法更改按钮

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;
}

使用它们的页面是：[link] (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;
}

Answer 2

使用“onmouseover”事件处理程序来完成它。 一个简单的例子是在将鼠标移到按钮上时更改颜色。

<button id="buttonone" type="button" onmouseover="changecolor()">Click Me!</button>
<script type="text/javascript">
    function changecolor()
    {
       document.getElementById("buttonone").setAttribute("color","red");

    }
</script>

这会在将鼠标悬停在按钮上时将按钮文本颜色更改为红色。

使用css和js！

function changecolor() 
{ 
document.getElementById("buttonone").setAttribute("class","somenewvalue"); 
} 

然后在 css 样式表中使用 .somenewvalue 为其赋予所需的效果 .somenewvalue { color:red; }

否则，使用 onmouseover 事件处理程序，您可以删除前一个按钮并创建一个具有新属性的新按钮。这可以使用 DOM 函数来完成。使用样式表中的“id”或“class”为新创建的按钮添加效果。如果您的网站上有这么多按钮（而不是在一个地方或页面上），那么最好单独使用 css。如果您网站上不同按钮的效果会有所不同，那么 Js 和 css 一起将是一个不错的选择。同样，如果您有很多按钮，那么单独使用 css 会更好。我不确定如何单独使用 css。