Hi,
Welcome to Sitepoint 
I can't see anything immediately obvious apart from the fact that you have more weight on some elements than others.
e.g.
Code:
#software-top-half #action_btns a:hover {
background-position: 0px -45px;
}
#free-trial a{
background: url(images/btn_free_trial.png) no-repeat 0 0;
}
You are using two ids on some elements which means they have double the weight and will over-rule any single id elements. As ids are unique anyway there is no need to use two of them. You can't make them more unique
I would organise your code like this and make sure the hover states follow the original normal states definitions.
Here's a working example:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#action_btns {
position: absolute;
top: 30px;
right: 20px;
}
#action_btns a {
width: 159px;
height: 45px;
display: inline-block;
margin-bottom: 5px;
}
#free-trial a {
background:red url(images/btn_free_trial.png) no-repeat 0 0;
}
#buy-now-btn a {
background:blue url(images/btn_buy_now.png) no-repeat 0 0;
}
#action_btns a:hover {
background-position: 0px -45px;
background-color:green;
}
</style>
</head>
<body>
<div id="action_btns">
<div id="free-trial"><a href="#"></a></div>
<div id="buy-now-btn"><a href="#"></a></div>
</div>
</div>
</body>
</html>
Make sure that you set the hover states after the normal states rules and that you use the same weight as the original rule.
If the above doesn't solve the problem then we'd need a link to the problem or you should construct a small working demo as in the code I posted above.
Reply With Quote
Bookmarks