0

Raphael JavaScriptライブラリを使用して、内部にテキストを含むボタンを作成しようとしています。マウスオーバーのボタンの周りを光らせたいのですが。これは、長方形とテキストのセットを使用し、セットにグローを適用することで実現しました。結果のボタンセットにmouseoverメソッドとmouseoutメソッドをバインドする2つのアプローチを試しました。前者の場合、カーソルがテキストに到達してもグローは維持され、後者の場合、グローは消えます。コードは次のとおりです。

    // canvas
var paper = Raphael(0, 0, "100%", "100%");

// background of the first button
var bBox1 = paper.rect(100, 100, 120, 50, 10).attr({
    fill: 'darkorange',
    stroke: '#3b4449',
    'stroke-width': 2
});
// text of the first button
var text1 = paper.text(bBox1.attrs.x + bBox1.attrs.width / 2, bBox1.attrs.y + bBox1.attrs.height / 2, 'Click to expand').attr({
    "font-family": "Helvetica",
    "font-size": 16
});

// set of rectangle + text = button
var button1 = paper.set().attr({
    cursor: 'pointer'
});
button1.push(bBox1);
button1.push(text1);

button1.mouseover(function (event) {
    this.oGlow = bBox1.glow({
        opacity: 0.85,
        color: 'gray',
        width: 15
    });
}).mouseout(function (event) {
    this.oGlow.remove();
});

// ********** now the second button **********
// background of the second button
var bBox2 = paper.rect(100, 200, 120, 50, 10).attr({
    fill: 'lightblue',
    stroke: '#3b4449',
    'stroke-width': 2
});
// text of the first button
var text2 = paper.text(bBox2.attrs.x + bBox2.attrs.width / 2, bBox2.attrs.y + bBox2.attrs.height / 2, 'Click to expand').attr({
    "font-family": "Helvetica",
    "font-size": 16
});

// set of rectangle + text = button
var button2 = paper.set().attr({
    cursor: 'pointer'
});
button2.push(bBox2);
button2.push(text2);

// function for the mousover event for buttons
var buttonMouseoverHandler = function (event) {
    this.oGlow = this.glow({
        opacity: 0.85,
        color: 'gray',
        width: 15
    });
}

// function for the mouseout event
var buttonMouseoutHandler = function (event) {
    this.oGlow.remove();
}

button2.mouseover(buttonMouseoverHandler);
button2.mouseout(buttonMouseoutHandler);

これが実際のjsfiddleの例です：http：//jsfiddle.net/fkNhT/

振る舞いの違いがよくわかりませんが、ヒントを教えてください。

4

1 に答える 1

0

シンプル：最初のマウスオーバーでは、何がマウスオーバーされているかに関係なく、rectオブジェクトにグローを設定します。

this.oGlow = bBox1 .glow（{..。

2番目では、これを「this」に設定します。これは、マウスをその上に置いたときにテキストオブジェクトに適用されます。

this.oGlow = this .glow（{..。

要素の内部要素でのホバーの喪失を防ぐ方法は、SOに関する最も一般的なRaphael関連の質問の1つです。小さなプロジェクトの簡単な解決策についてはこれを参照してください。大きなプロジェクトの代替案についてはこのオープンスレッドを参照してください。

于 2013-01-23T16:40:21.507 に答える