Фоновое изображение перекрывается проблема с JQuery

Question

Вот моя рабочая страница . Я прикрепил кнопки к белому слону, и вы можете перемещаться, но левые изображения перекрываются правыми. Я думаю, что проблема с CSS. Краткая структура здесь.

<script>
        $(document).ready(function(){
            $('#top').click(function(){
                $('#p81').animate({top: "-=64px"}, 100);
            });
</script>
<style>
        div.chess_board{
            height: 512px;
            position: relative;
            width: 512px;
        }
        div.chess_square{
            height:64px;
            position: absolute;
            width:64px;
        }
        div.chess_square.white {
            background: none repeat scroll 0 0 #ffffff;
        }
            .
            .
            .
        div.chess_piece{
                background-image: url("sprite.png");
                height: 64px;
                width: 64px;
                position: absolute;
            }
        div.chess_piece.bishot.white{
            background-position: -64px 0;           
        }
</style>

<div class="chess_board">
  <div id="b81" class="chess_square white" style="top: 448px; left: 64px;">
    <div class="chess_square_inner"></div>
    <div id="p81" class="chess_piece bishot white"></div>
  </div>
</div>
<input type="button" id="top" value="top" />

Answer 1

Вы получаете эффект перекрытия, потому что вы используете прозрачный PNG. Когда вы перемещаете положение слона, оно просто перемещается на вершине ладьи. Вы можете сделать одно из следующего:

1. Удвойте свой спрайт, чтобы получить белый и серый фон. Затем переключитесь на соответствующее место. PNG не будет прозрачным, поэтому вы его закроете.
2. Вы можете обновить jQuery, чтобы скрыть фон пункта назначения, в данном случае ладью.

Пример для пункта 2: (Вы должны быть хитрыми со своими селекторами)

$('#left').click(function(){
    $(piece).animate({left: "-=64px"}, 100);
    $("#p80").css("background-image", "none");
});

UPDATE

Посмотрев на свою страницу немного подробнее, вы также можете разрешить ее, установив цвет фона для div с классом chess_piece.

.chess_piece
{
    background-color: #ffffff/#cfcfcf;
}

Вы можете сделать это с помощью jQuery и вашего мероприятия:

$('#left').click(function(){
    $(piece).animate({left: "-=64px"}, 100);
    $(piece).css("background-color", "#cfcfcf");
});

ОБНОВЛЕНИЕ 2

После просмотра вашего комментария проблема немного изменилась. Чтобы преодолеть эту проблему, вам нужно добавить z-index к вашему произведению. Сгенерированная разметка будет выглядеть примерно так:

<div class="chess_piece bishot white" id="p81" style="top: -64px; left: 64px; z-index: 10000;"></div>