4

長方形のみを含むセットがあります。

var hoverTrigger = this.paper.set();
var outline = this.paper.rect();
outline.attr({
...
hoverTrigger.push(outline)
this.sprite.push(hoverTrigger);

ホバーすると、長方形が拡張され、いくつかのリンクが追加されます。マウスをオフにすると、リンクが消え、長方形が再び小さくなります。

hoverTrigger.hover(function () {
  var link = this.paper.text();
  hoverTrigger.push(link);
  outline.animate({
  ...
}, function() {
  link.remove();
  outline.animate({
  ...
});

ただし、ホバー機能は、セット全体ではなく、セット内の各アイテムに個別に適用されているようです。リンクの上にマウスを置くと、ホバーオフ機能が起動し、リンクが消えます。時々、ボックスは、イベントをすばやく連続してホバリングし、ホバリングします。

セット内の2つのものの間でマウスを動かしてもホバーオフがトリガーされないように、ホバーをセットに適用する方法はありますか？

4

4 に答える 4

5

最近自分でこの制限に直面したので、私はhoverInBoundsそれを解決するというRaphaelの小さな拡張機能を書くことにしました。

簡単に言うと、マウスが要素に入ると、実際にその境界の外に移動したときを追跡します。つまり、前ではなく、ホバーアウト関数を実行します。

デモ： http： //jsfiddle.net/amustill/Bh276/1

Raphael.el.hoverInBounds = function(inFunc, outFunc) {
    var inBounds = false;

    // Mouseover function. Only execute if `inBounds` is false.
    this.mouseover(function() {
        if (!inBounds) {
            inBounds = true;
            inFunc.call(this);
        }
    });

    // Mouseout function
    this.mouseout(function(e) {
        var x = e.offsetX || e.clientX,
            y = e.offsetY || e.clientY;

        // Return `false` if we're still inside the element's bounds
        if (this.isPointInside(x, y)) return false;

        inBounds = false;
        outFunc.call(this);
    });

    return this;
}

Raphael紙オブジェクトを作成する前に、上記のコードブロックを配置します。

于 2013-01-08T22:13:08.033 に答える
3

私は前にこの問題にぶつかった。私は2つの解決策を見つけました。

不透明度を0に設定して、他の要素の上に長方形を作成します

var paper = new Raphael( 0, 0, 100, 100 );
var rect = paper.rect( 0, 0, 100, 100 ).attr({ opacity: 0 });
rect.hover( func_in, func_out );

これは、クリックなどの全体的なアクションが1つある要素に対してのみ機能します。

もう1つのオプションは、要素のセットにカーソルを合わせたときにホバー機能をキャンセルすることです。

var funcOutTimer;

set.hover( function( ) {
    if( funcOutTimer ) { // Hovered into this element in less than 100 milliseconds => cancel
        window.clearTimeout( funcOutTimer);
    } else {
    // do stuff
    }
},
function( ) {
    funcOutTimer = setTimeout( function( ) {
        // do stuff
    }, 100 ); // wait for 100 milliseconds before executing hover out function
});

基本的に、ホバーイン関数は最初に要素のセットを初めて入力したときにのみ実行され、ホバーアウト関数は最後にホバーした要素がそのセットの一部ではないときに一度だけ実行されます。

于 2013-01-08T21:42:29.313 に答える
0

私はこれが次のように機能することを発見しました

myCircleElement.hover (
    function(e) { myTextElement.animate({opacity:1}, 800); },
    function(e) {
        var x = e.layerX || e.x,
        y = e.layerY || e.y;
        // Return `false` if we're still inside the element's bounds                                        
        if (this.isPointInside(x, y)) return false;
        // otherwise do something here.. eg below
        myTextElement.animate({opacity:0}, 800); //
    }
);
于 2013-04-09T00:38:11.823 に答える
0

ブルーノの詳細な方法には、次の小さな問題があります。

他の要素の上に長方形を作成する場合、他の要素がテキストである場合、それらのテキストはWebページで選択できません。しかし、それは機能します。

ちなみに、属性「不透明度」：0では不十分なので、私の場合は「塗りつぶし」：「白」属性を追加する必要がありました。

次のようにオブジェクトを前面に移動する必要があります。obj.toFront（）; objは、「rect」などのようなラファエルの形です。

マウスオーバーとマウスアウトのイベントでテストしましたが、機能します。

ここで私のフィドルをチェックしてください：フィドルへのリンク

function withArray(x,y){
    var rect = paper.rect(x, y, 100, 60).attr({
        fill: "green"
    });
    rect.text = paper.text(x+(100/2), y + 30, 'rect w/array').attr({
        'font-size': 12,
        "fill": "white"
    });
    var rectover = paper.rect(x,y,100,60).attr({
        fill: "white",
        opacity: 0
    });
    var myArray = paper.set();
    myArray.push(rect, rect.text, rectover);
    myArray.mouseover(function() {
    var anim = Raphael.animation({
    transform: ['S', 1.5, 1.5, (rect.attr("x")), (rect.attr("y"))]
        }, 100, "backOut", function() {
    });
    myArray.animate(anim);
    }).mouseout(function() {
        var anim = Raphael.animation({
            transform: [""]
        }, 50, "backOut", function() {
   });
   myArray.stop().animate(anim);
});
}
于 2015-06-10T18:34:13.107 に答える