Question

我是拉斐尔JS和SVG的新手。目前我在地图功能上使用SVG和Raphael。

我遇到了悬停效果的问题，这会影响你用10px悬停的给定元素。但是，如果将鼠标缓慢移动到元素中，hoverIn和hoverOut将会发生多次，从而导致闪烁。

我想我可以通过克隆国家来解决这个问题，并在徘徊时将其隐藏起来并保持静止。我可以这样说，因为地图包含数百种形状......

方法是什么？我该怎么办？

Answer 1

如果我理解正确，当您将鼠标悬停在该元素上时元素会移动，这会导致hoverOut事件。慢速鼠标移动你想要发生什么？它移动一次，一直移动直到鼠标进入？

您需要在元素上设置一个变量，以显示何时将其移动10px。然后你可以做一些像（伪代码）

的东西

hoverIn() { 
    if (isShifted) {
        inWhenShifted = true  
    } else {
        // offset element
        isShifted = true
    } 

hoverOut() {
    if (isShifted) { 
         if (inWhenShifted) {
             // put element back
             isShifted = false
             inWhenShifted = false
         } else {
             // do nothing?, this is the case where the hoverOut fired 
             // because we moved the element
         }
    } else {
        // do nothing?, this is the case where we hoverOut again after shifting
        // the element back
    }
}

RaphaelJS：悬停和移动元素时消除闪烁

1 个答案: