1

複数のセットを含むラファエル紙を持っています。各セットには、長方形、長方形の上のパス、および2つのテキストがあり、そのうちの1つは非表示で、もう1つは長方形の内側にあります。マウスがrect全体（テキストを含む）にカーソルを合わせたときにカーソルを変更したかったのです。テキストとrectに異なるイベントハンドラーを使用し、両方のカーソルを同じ値に変更すると、テキストのマウスアウトのちらつきが表示されます。このちらつきにより、マウスオーバーがそれほどスムーズになりません。

マウスがセット全体の上にあるときにカーソルを手に変更したいのですが、カーソルが変更され、長方形の境界が再び交差するまでちらつきません。

何か解決策があれば助けてくださいKavita

4

2 に答える 2

3

rect、rectの上のパス、および2つのテキストを含むセット全体にホバー効果を適用したいとします。

var container = $(id to your Raphael container);
var yourSet = paper.set();  //assuming you have pushed all four elements into your set....
yourSet.mouseover(function(){
        container.css('cursor','pointer');
}
yourSet.mouseout(function(){
        container.css('cursor','default');
}

それがあなたを助けることを願っています....

于 2012-07-26T17:36:55.377 に答える
2

マウスをテキストから周囲のボックスに移動するときのちらつきを避けるために、mouseoverイベントが処理されるオーバーレイ要素を使用することをお勧めします。

すべての要素を含むセットがすでにある場合は、セットのgetBBoxからの情報を使用して新しいオーバーレイ要素を簡単に作成できます。

これがどのように機能するかについての小さなスニペットがあります。

<script type="text/javascript">
        function drawPreview(){
            var preview = Raphael("preview", 200, 100);
            var box1 = preview.rect(20,20,160,40);
            box1.attr({'fill':'#ccc','stroke-opacity' : 0, 'opacity':0.5});
            var box2 = preview.rect(50,10,30,80);
            box2.attr({'fill':'#999','stroke-opacity' : 0, 'opacity':0.5});
            var line = preview.text(100, 30, "My Text");

            var mySet = preview.set();
            mySet.push(box1,box2,line);

            var bb = mySet.getBBox();
            var overlay = preview.rect(bb.x,bb.y,bb.width,bb.height);
            overlay.attr({'fill':'#fff','stroke-opacity' : 0, 'opacity':0});
            overlay.mouseover(function(){
                this.attr({'cursor':'pointer'});
            });
            overlay.mouseout(function(){
                this.attr({'cursor':'default'});
            });
        }
</script>

ここに画像の説明を入力してください

于 2012-08-16T12:30:24.107 に答える