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

使用＆＃39; onmouseover＆＃39;完成它的事件处理程序。一个简单的例子就是在将鼠标移到按钮上时改变颜色。

<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”标记将新效果添加到新创建的按钮中。或者＆＃39; class＆＃39;在样式表中。如果您的网站中有这么多按钮（不是在一个地方或页面），那么单独使用css会更好。如果您网站上不同按钮的效果会有所不同，那么Js和css将是一个不错的选择。同样，如果你有很多按钮，css就更好了。我不确定如何单独使用css。

Answer 2

感谢各位回复，但我找到了解决方法：

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

在悬停时无法更改按钮

2 个答案: