Problema com o elemento :hover

[Neto Schneider]

Boa tarde!

 

Estou retornando com um problema com o elemento :hover, o problema é o seguinte, ele só muda de imagem e muda o icone do mouse para link apenas quando eu passo o mouse na parte inferior da imagem, já cansei de procurar e não acho nada relacionado a este maldito problema, segue as codes...

 

Arquivo.css

.player_play {
	background-image: url(imagens/player/play.png);
	height: 29px;
	width: 39px;
	position: absolute;
	top: 2px;
	left: 3px;
}
.player_play:hover {
	background-image: url(imagens/player/play_hover.png);
}

Arquivo.php

<a class="player_play" href="#"></a>

 

[DiF]

@Neto Schneider Faltou deixar o elemento <a> a nível de bloco.

Adicione a propriedade  display: block  na classe player_play

 

veja um exemplo prático: https://jsfiddle.net/qzLb3zyr/

 

[Neto Schneider]

Continuo com o mesmo problema, lembrando que já utilizei o :hover em um local, não sei se isso interfere, utilizei ele no menu, na qual funcionou com sucesso...

 

#menu_titulo ul li a:hover {
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	background: -moz-linear-gradient( center top, #a8ba21 12%, #779612 93% );
	background: -ms-linear-gradient( top, #a8ba21 12%, #779612 93% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a8ba21', endColorstr='#779612');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(12%, #a8ba21), color-stop(93%, #779612) );
	background-color: #a8ba21;
	color: #ffffff;
	display: inline-block;
	text-shadow: 0px 0px 0px #ffffff;
	-webkit-box-shadow: inset 5px 4px 13px 3px #55690e;
	-moz-box-shadow: inset 5px 4px 13px 3px #55690e;
	box-shadow: inset 5px 4px 13px 3px #55690e;
	position: relative;
	right: 10px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	margin-right: -20px;
}