私はタイル(草、水など)の入ったコンテナを持っており、それらのいくつかにはアイテム(ボーダースプライト、木、および一般的なアイテム)があります。スプライトの性質上、すべてのアイテムは64x64ですが、タイルは32x32のみです。
私の問題は、タイルでホバーイベントをトリガーしたいのですが、別のタイルのアイテムによってシャドウされることがあります。
下の画像は問題を示しています。濃い緑色の領域は、ツリータイルをホバーしたいときに実際にホバーされるタイルです。
問題http://upload.cip.nu/pfile.php?file_id=2327
CSS:
#map_canvas .tile{
height: 32px;
position: absolute;
width: 32px;
}
#map_canvas .tile .item{
background-position: bottom right;
background-repeat: no-repeat;
bottom: 0;
display: inline-block;
height: 64px;
margin: 0;
padding: 0;
position: absolute;
right: 0;
}
簡略化されたHTML:
<div class="tile" style="background-image: url(grass.png);"></div>
<div class="tile" style="background-image: url(grass.png);"></div>
<div class="tile" style="background-image: url(grass.png);">
<div class="item" style="background-image(top-left-border.png);"></div>
</div>
これがライブデモですhttp://sleavely.com/tiles/
質問の言い回しもわかりませんが、次のようになります。
親要素(.tile)でのみイベントをトリガーして、オーバーフローした子(.item)が実際にホバーしているタイルを難読化しないようにすることは可能ですか?
編集:@Brilliandのおかげで私は以下を実装しました
function figureOutTile(e){
var $source = jQuery(e.srcElement);
if($source.hasClass("item")){
var $parent = $source.parent();
var posx = $parent.attr("col");
var posy = $parent.attr("row");
if(e.offsetY <= 32){
if(e.offsetX <= 32){
return jQuery(".tile[col="+ (posx-1) +"][row="+ (posy-1) +"]");
}else{
return jQuery(".tile[col="+ posx +"][row="+ (posy-1) +"]");
}
}else{
if(e.offsetX <= 32){
return jQuery(".tile[col="+ (posx-1) +"][row="+ posy +"]");
}else{
return $parent;
}
}
}else{
return $source;
}
}
jQuery("#map_viewport").on({
mouseenter: function(e) {
var $target = figureOutTile(e);
$target.addClass('hovered');
},
mouseleave: function() {
jQuery(".tile.hovered").removeClass('hovered');
}
}, '.tile');