can't get the button change on hover - css

Question

I have two sets of buttons. The first set is for navigation, the second set is for download and info.
The first set works fine, the second set works fine too, but I can't get these buttons to change when I hover over them.
Here is the code I used for the second set (this set is used with book covers):
.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;
}
The page where they are used is: [link] (http://www.hoddenbagh.nl/bibleopen/subjects_eBooks.html)

Answer 1

Thanks guys for your responces, but I found the solution how to handle this:
.book_covers li .btn1:hover {
background-color: #FFF;
color: #000;
}
.book_covers li .btn2:hover {
background-color: #FFF;
color: #000;
}

Answer 2

Use 'onmouseover' event handler to get it done.
A simple example would be changing the color on moving the mouse over a button.
<button id="buttonone" type="button" onmouseover="changecolor()">Click Me!</button>
<script type="text/javascript">
function changecolor()
{
document.getElementById("buttonone").setAttribute("color","red");
}
</script>
This would change the button text color to red on hovering the mouse over the button.
Using css and js!
function changecolor()
{
document.getElementById("buttonone").setAttribute("class","somenewvalue");
}
Then use .somenewvalue in the css stylesheet to give it the required effects .somenewvalue { color:red; }
Otherwise,using the onmouseover eventhandler, you could remove the previous button and create a new button with new attributes. This can be done using the DOM functions.Add effects to the newly created button using either its 'id' or 'class' in the stylesheet. If you have so many buttons in your website(not at one place or page),then it would be better to use css alone. Js and css together would be a good choice if the effects for different buttons on your site are gonna be different. Again,if you have a lot of buttons,css alone is better. I ain't sure about how to do it with css alone.