Jquery: comportement de plusieurs boutons toggle play/pause

Bonjour,
dans le but de créer un player audio, j'ai simulé des visuels qui font apparaitre un bouton "play" en hover. En cliquant sur ce bouton, on passe de play à pause de manière unique (un seul visuel "pause" en même temps). Après coup, je me dis que ce serait bien que le visuel "pause" reste visible pour que l'on sache quel est le morceau en train de jouer.

Voir La démo actuelle

Le problème avec mon code c'est que le Hover Out semble avoir priorité dans tous les cas et du coup le bouton disparait avec FadeTo. D'une certaine manière, il faudrait que je lie le click avec le hover mais je ne vois pas comment démarrer car j'ai ma logique de départ dans la tête.

Pourriez-vous me guider un peu ? Merci bien !

Javascript :

$item_thumb.hover(function(){
		jQuery(this).find('img').fadeTo('fast', 0.8);
		jQuery(this).find('.item_play_icon').fadeTo('fast', 1);
		//jQuery(this).find('.item_play_icon,.item_more_icon,.item_zoom_icon').fadeTo('fast', 1);
	}, function(){
		jQuery(this).find('img').fadeTo('fast', 1);
		jQuery(this).find('.item_play_icon').fadeTo('fast', 0);
		//jQuery(this).find('.item_more_icon,.item_zoom_icon').fadeTo('fast', 0);
	});


	jQuery('.item_play_icon').click(function() {
		$thisItemPlaying = jQuery(this).hasClass("isplaying");
		jQuery('.item_play_icon').each(function() {
			jQuery(this).removeClass("isplaying");
		});			
		if (!$thisItemPlaying) {
			jQuery(this).addClass("isplaying");
		}		
	});	

CSS :

.item {
	position:relative;
	width:400px;
	height:400px;
	margin-top:10px;
	margin-right :10px;
	float:left;
}

.item img {
	position:absolute
}

.item_play_icon {
	text-indent:-9999px;
	position:absolute;
	background: transparent url('../img/icon_play.png') no-repeat top left;
	width : 128px;
	height: 128px;
	top:50%;
	left:50%;
	margin-left:-64px;
	margin-top:-64px;
	display:none

}

.isplaying {
	background-position : 0px -128px !important;
}

Tu pourrais ajouter une classe "ispaused" plutôt que de seulement faire la transition avec une seule classe.

Vaxilart a écrit :
Tu pourrais ajouter une classe "ispaused" plutôt que de seulement faire la transition avec une seule classe.

Merci pour ta réponse. Je ne suis pas sur de comprendre ta proposition car le problème serait le même non ?

En fait le code actuel n'assimile pas le changement d'état.
C'est comme s'il mémorisait l'état au moment ou je passe la souris dessus.
Je clique, ça change d'état mais le "mouseout" n'est pas informé. Je rajoute une classe "isplaying" mais le Hover ne le sait pas au final.

Bref que ce soit "ispaused" ou "isplaying" comment informer Hover qu'entre le moment où j'ai passé ma souris sur l'élément et le click, il y a eu un changement d'état à prendre en compte.

Merci.