我有一个带瓷砖的容器(草,水等),其中一些我有物品(边境精灵,树木和一般物品).由于精灵的性质,所有项目都是64×64,而瓷砖只有32×32.
我的问题是我想在磁贴上触发悬停事件,但它们有时会被另一个磁贴的项目遮挡.
下图显示了问题.厚厚的绿色区域是我想要悬停树木时真正悬停的瓷砖.
the problem 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');
解决方法
就你的浏览器而言,将鼠标悬停在瓷砖上的东西与悬停在瓷砖上的东西相同,而不是悬停在任何被覆盖的东西上.为了在你的特定情况下解决这个问题,我建议把你的悬停函数放在#map_canvas上,然后在那个函数中找出哪个tile正在盘旋.对于矩形网格中的切片,这是简单的算术.
当然,要使其工作,您需要包含一个mousemove事件(以检测鼠标何时从一个磁贴移动到另一个磁贴),如果用户仍然悬停在同一磁贴上,您可能应该包含退出该函数的代码.
编辑：虽然这个答案已被接受,但这是一个基于我的评论的解决方案：
$(".tile").append($("<div/>",{
css: {
position: "absolute",top: 0,left: 0,right: 0,bottom: 0,"z-index": 50
}
}));
这似乎解决了所有带有物品的瓷砖的问题,虽然它搞砸了你的：空声明.我之所以提到它主要是因为它更接近回答问题.
