Background Image Overlapped Problem with jQuery
Here is my working page. I attached buttons to white bishop and you can move around but left images are overlapped by right images. I think the problem is with CSS. The brief structure is here.
<script>
$(document).ready(function(){
$('#top').click(function(){
$('#p81').animate({top: "-=64px"}, 100);
});
</script>
<styl开发者_开发知识库e>
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" />
You get the overlap effect because you are using a transparent PNG. When you move the position of the bishop over, it simple moves on top of the rook. You can do one of the following:
- Double up your sprite to have the white and gray backgrounds. Then switch to the appropriate space. The PNG will not be transparent so you will cover it up.
- You can update your jQuery to hide the background of the destination, in this case the rook.
Example for item 2: (You will have to get crafty with your selectors)
$('#left').click(function(){
$(piece).animate({left: "-=64px"}, 100);
$("#p80").css("background-image", "none");
});
UPDATE
After looking at your page a bit more you can also resolve it by setting the background color of the div with class 'chess_piece'.
.chess_piece
{
background-color: #ffffff/#cfcfcf;
}
You could do it with jQuery and your event:
$('#left').click(function(){
$(piece).animate({left: "-=64px"}, 100);
$(piece).css("background-color", "#cfcfcf");
});
UPDATE 2
After seeing your comment, the issue has changed slightly. To overcome that issue you need to add a z-index
to your piece. The generated markup would be something like:
<div class="chess_piece bishot white" id="p81" style="top: -64px; left: 64px; z-index: 10000;"></div>
精彩评论