jQuery .hover() nie działa dla jednej klasy

Question

Mam sobie metodę w obiekcie która podmienia mi styl :hover dwóch klas. klasy są identyczne różnią się tylko nazwą ale muszą się różnić gdyż jest to potrzebne. Metoda wygląda tak:

UpdateSquareStyle: function() {
	$(chessboard.classSquare).hover(function(){
		$(this).css('box-shadow',styleManager.squareHoverStyle);
	},function(){
		$(this).css('box-shadow','none');
	});
	$(chessboard.classFigure).hover(function(){
		$(this).css('box-shadow',styleManager.squareHoverStyle);
	},function(){
		$(this).css('box-shadow','none');
	});
},

pierwsza podmiana działa bez problemów. Druga, zupełnie jakby jej nie było. Nawet jak usunę pierwszą druga i tak nie działa. Od razu mówię, że nie wchodzi w grę zapisanie tego w css gdyż będę korzystał z różnych stylów zapisanych w pliku json.
podstawowe atrybuty tych klas zapisane w css wyglądają tak:

.square, .figure {
	position: absolute;
	width: 10vmin;
	height: 10vmin;
	background-size: cover;
	transition: top .5s ease-in-out, left .5s ease-in-out, box-shadow .1s ease-out, transform .5s ease-out;
}

korzystają z tego samego kodu. Sprawdziłem czy żadna inna metoda czy funkcja mi nie koliduje z tą. Ktoś wie o co może chodzić?

Comments

Pokaż kod HTML oraz pola w obiekcie chessboard. Strzelam w ciemno ze chessboard.classFigure w kodzie HTML posiada dziecko dlatego hover wykonuje się dwa razy.

---

$(chessboard.target).append('<div onclick="eval(this.id).select()" class="figure" id="'+this.id+'" style="background-image: url('+"'"+this.image+"'"+'); left: '+this.x+'vmin; top: '+this.y+'vmin;"></div>');

HTML jest generowany przez JS w samym html jest niewiele. tylko niezmienne elementy.

var chessboard = {
	playerTurn		: 1,
	rotateInTurn	: true,
	playerWhite		: 'Biały',
	playerBlack		: 'Czarny',
	classSquare		: '.square',
	classFigure		: '.figure',
	border			: '#chessboard',
	diary			: '#gameDiary',
	target			: '#chessboardWrapper',
	selectedFigure	: 'none',
	squares			: {
		'A1':null,'A2':null,'A3':null,'A4':null,'A5':null,'A6':null,'A7':null,'A8':null,
		'B1':null,'B2':null,'B3':null,'B4':null,'B5':null,'B6':null,'B7':null,'B8':null,
		'C1':null,'C2':null,'C3':null,'C4':null,'C5':null,'C6':null,'C7':null,'C8':null,
		'D1':null,'D2':null,'D3':null,'D4':null,'D5':null,'D6':null,'D7':null,'D8':null,
		'E1':null,'E2':null,'E3':null,'E4':null,'E5':null,'E6':null,'E7':null,'E8':null,
		'F1':null,'F2':null,'F3':null,'F4':null,'F5':null,'F6':null,'F7':null,'F8':null,
		'G1':null,'G2':null,'G3':null,'G4':null,'G5':null,'G6':null,'G7':null,'G8':null,
		'H1':null,'H2':null,'H3':null,'H4':null,'H5':null,'H6':null,'H7':null,'H8':null
	},
	squaresToCoord	: function(id) {
		var letters = {'A':0,'B':1,'C':2,'D':3,'E':4,'F':5,'G':6,'H':7};
		var numbers = {'1':0,'2':1,'3':2,'4':3,'5':4,'6':5,'7':6,'8':7};
		var coords = {y: letters[id[0]],x: numbers[id[1]]};
		return coords;
	},
	coordToSquares	: function(x,y) {
		var id = this.alphabet[y]+x;
		return id;
	},
	
	alphabet 		: ['A','B','C','D','E','F','G','H'],
	showChessboard	: function() {
		for(var i=0;i<64;i++) {
			var squareId = this.alphabet[Math.floor(i/8)]+((i%8)+1);
			var squarePos = 'top: '+(Math.floor(i/8)*10)+'vmin; left: '+((i%8)*10)+'vmin;';
			$(this.target).append('<div onclick="chessboard.selectSquare(this.id)" class="square" id="'+squareId+'" style="'+squarePos+'"></div>');
		}
		styleManager.updateStyle();
	},
	rotate			: function() {
		if(this.playerTurn==1) {
			$(this.target).css('transform','rotate(180deg)');
			$(this.classFigure).css('transform','rotate(-180deg)');
			$(this.border).css('background-image','url('+"'"+styleManager.blackBorder+"')");
		} else {
			$(this.target).css('transform','rotate(0deg)');
			$(this.classFigure).css('transform','rotate(0deg)');
			$(this.border).css('background-image','url('+"'"+styleManager.whiteBorder+"')");
		}
	},
	start			: function(color) {
		whitePawn1.move('G1');
		whitePawn2.move('G2');
		whitePawn3.move('G3');
		whitePawn4.move('G4');
		whitePawn5.move('G5');
		whitePawn6.move('G6');
		whitePawn7.move('G7');
		whitePawn8.move('G8');
		whiteTower1.move('H1');
		whiteTower2.move('H8');
		whiteHorse1.move('H2');
		whiteHorse2.move('H7');
		whiteLaufer1.move('H3');
		whiteLaufer2.move('H6');
		whiteHetman.move('H4');
		whiteKing.move('H5');
		blackPawn1.move('B1');
		blackPawn2.move('B2');
		blackPawn3.move('B3');
		blackPawn4.move('B4');
		blackPawn5.move('B5');
		blackPawn6.move('B6');
		blackPawn7.move('B7');
		blackPawn8.move('B8');
		blackTower1.move('A1');
		blackTower2.move('A8');
		blackHorse1.move('A2');
		blackHorse2.move('A7');
		blackLaufer1.move('A3');
		blackLaufer2.move('A6');
		blackHetman.move('A4');
		blackKing.move('A5');
		if(this.playerTurn==0) {
			this.rotate();
			this.playerTurn=1;
		}
		$(this.diary).html(' Tura gracza '+this.playerWhite);
	},
	selectSquare	: function(id) {
		
	},
	turn			: function() {
		if(this.rotateInTurn==true) this.rotate();
		if(this.playerTurn==1) {
			this.playerTurn=0;
			$(this.diary).append('Tura gracza '+this.playerBlack);
		} else {
			this.playerTurn=1;
			$(this.diary).append('Tura gracza '+this.playerWhite);
		}
	}
};

A to obiekt chessboard.
Ale sprawdzałem w narzędziach programistycznych. .figure po najechaniu nie zmienia się w ogóle. 

---

Znalazłem przyczynę już samemu. Po prostu wywołuje tą metodę zanim wyświetlę divy figur