Hover Attribute Help

On my web page, i have multiple buttons one on top of the other, and they are all slightly transparent. I am trying to set things up so that they become fully visible (opacity:1) when the mouse is hovered over them. I am trying to use the hover attribute to make this work. For the first two buttons, the desired result is achieved, however using the same method for all the other buttons doesn't seem to work. Only the first two buttons react correctly. Here is the CSS:

.kong {
	background-image:url('nav.png');
	vertical-align:middle;
	border:1px solid #CCCCCC;
	font:15px arial,sans-serif;
	color:#000;
	width:125px;
	height:30px;
	position:absolute;
	top:65px;
	left:929px;
	opacity:.7;
	-webkit-transition-property:opacity;
	-webkit-transition-duration:300ms,300ms,300ms;
}

.kong:hover {
	opacity:1;
}

.giz {
	background-image:url('nav.png');
	vertical-align:middle;
	border:1px solid #CCCCCC;
	font:15px arial,sans-serif;
	color:#000;
	width:125px;
	height:30px;
	position:absolute;
	top:95px;
	left:929px;
	opacity:.7;
	-webkit-transition-property:opacity;
	-webkit-transition-duration:300ms,300ms,300ms;
}

.giz:hover {
	opacity:1;
}

.kot {
	background-image:url('nav.png');
	vertical-align:middle;
	border:1px solid #CCCCCC;
	font:15px arial,sans-serif;
	color:#000;
	width:125px;
	height:30px;
	position:absolute;
	top:125px;
	left:929px;
	opacity:.7;
	-webkit-transition-property:opacity;
	-webkit-transition-duration:300ms,300ms,300ms;
}

.kot:hover {
	opacity:1;
}

.faq {
	background-image:url('nav.png');
	vertical-align:middle;
	border:1px solid #CCCCCC;
	font:15px arial,sans-serif;
	color:#000;
	width:125px;
	height:30px;
	position:absolute;
	top:155px;
	left:929px;
	opacity:.7;
	-webkit-transition-property:opacity;
	-webkit-transition-duration:300ms,300ms,300ms;
}

.faq:hover {
	opacity:1;
}

.you {
	background-image:url('nav.png');
	vertical-align:middle;
	border:1px solid #CCCCCC;
	font:15px arial,sans-serif;
	color:#000;
	width:125px;
	height:30px;
	position:absolute;
	top:185px;
	left:929px;
	opacity:.7;
	-webkit-transition-property:opacity;
	-webkit-transition-duration:300ms,300ms,300ms;
}

.you:hover {
	opacity:1;
}

Code (markup):

I have tried to remove the animations by removing:

	-webkit-transition-property:opacity;
	-webkit-transition-duration:300ms,300ms,300ms;

Code (markup):

from all of the buttons, but the did not solve the problem.

Any help is greatly appreciated, thank you in advanced.

 

Make sure the buttons are 'a' html tags and not anything else.
Example:
<a href="#">Button</a>

NOT

<div id="...">Button</div>

As some browsers don't fire the :hover event on things like divs, spans etc.