8

我有一个带有瓷砖（草、水等）的容器，其中一些我有物品（边框精灵、树木和一般物品）。由于精灵的性质，所有项目都是 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');​
4

3 回答 3

3 
$(".tile").children().on('mouseenter', function(e) { 
   e.stopPropogation(); 
});

或者

$(".tile").on('mouseenter', function(e) { 
   if (this===e.target) {
      //do stuff
   }
});

编辑：

$("#map_viewport").on({
    mouseenter: function(e) {
        if (this===e.target) {
            $(element).addClass('someClass')
        }
    },
    mouseleave: function() {
        $(element).removeClass('someClass')
    }
}, '.tile');
于 2012-05-17T19:14:18.483 回答
1

就您的浏览器而言，将鼠标悬停在从磁贴伸出的东西上与将鼠标悬停在它伸出的磁贴上是一样的，而不是悬停在被遮盖的任何东西上。要在您的特定情况下解决此问题，我建议将悬停功能放在#map_canvas 上，并在该功能中确定悬停在哪个图块上。对于矩形网格中的瓷砖，这是简单的算术。

当然，要使其工作，您需要包含一个 mousemove 事件（以检测鼠标何时从一个磁贴移动到另一个磁贴），并且您可能应该包含代码以在用户仍将鼠标悬停在同一磁贴上时退出该函数。

编辑：虽然这个答案已经被接受，但这是基于我的评论的解决方案：

$(".tile").append($("<div/>", {
    css: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        "z-index": 50
    }
}));

这似乎解决了所有带有项目的瓷砖的问题，尽管它搞砸了你的 :empty 声明。我之所以提到它，主要是因为它更接近于按要求回答您的问题。

于 2012-05-17T19:40:34.947 回答
0

编辑：如果确实是事件冒泡的问题并且您使用的是 jQuery，请查看event.stopPropagation 方法。

你试过加z-indexes吗？

    #map_canvas .tile{
        height: 32px;
        position: absolute;
        width: 32px;
        z-index: 1;
    }
    #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;
        z-index: 2;
    }
于 2012-05-17T19:13:31.183 回答