5

マウスオーバー、マウスアウト、クリックに基づいて色が変わる非常に単純なボタンを作成しようとしています。これをプロトタイプで行っていますが、マウスオーバーとマウスアウトを使用すると、ボタンをクリックした後にボタンが'白に変わりません。マウスアウトが原因のようです。これが私のコードです

$("izzy").observe('mouseover', function() {
     $('izzy').setStyle({ color: '#FFFFFF' });
});

$("izzy").observe('mouseout', function() {
     $('izzy').setStyle({ color: '#666666' });
});

$("izzy").observe('click', function() {
     $('izzy').setStyle({ color: '#FFFFFF' });
});

どうすれば修正できますか？ありがとう。

4

5 に答える 5

6

マウスオーバーとマウスアウトで何か他のことが起こっていない限り、css を使用してみませんか?

#izzy:hover { color: '#FFFFFF'; }

しかし、私はあなたが正確に何をしたいのかについて少し混乱しています。ボタンがクリックされた場合、またはマウスがボタンの上にある場合、ボタンを白くしたいと仮定します。次のように、クリック イベント ハンドラーにクリックされたクラスを追加させます。

$("izzy").observe('click', function() {
    $('izzy').addClass('selected');
});

そしてcssもそうです

#izzy { color: '#666666'; }
#izzy:hover, #izzy.selected { color: '#FFFFFF'; }

これには、スタイル (黒またはグレー) から、状態 (クリックされた/クリックされていない、およびマウスが置かれている/置かれていない) を分離できるという利点があります。現在、それらはすべて混ざり合っており、混乱を引き起こし、バグにさらされています.

于 2008-11-05T19:08:13.167 に答える
2

マウス クリックによってスタイルが永続的に変化し、マウス アウトに置き換わらないようにしたいということですか? その場合は、次のようにフラグを使用してみてください。

var wasClicked = false;

$("izzy").observe('mouseover', function() {
    if (!wasClicked) $('izzy').setStyle({ color: '#FFFFFF' });
});

$("izzy").observe('mouseout', function() {
    if (!wasClicked) $('izzy').setStyle({ color: '#666666' });
});

$("izzy").observe('click', function() {
    $('izzy').setStyle({ color: '#FFFFFF' });
    wasClicked = true;
});
于 2008-11-05T19:06:56.727 に答える
0

ホバーにCSSを使用し、選択したクラスを使用して要素に色を付けるのがおそらく最良の選択です。ただし、すでに配置されているコードをすばやく修正したい場合は、クリックされた後にmouseoutイベントの監視を停止できます。

$("izzy").observe('click', function(e) {
     e.element().setStyle({ color: '#FFFFFF' });
     e.element().stopObserving('mouseout');
});
于 2008-12-04T20:48:51.840 に答える
0

ステータスを設定して、他のイベントを防止します。

var clicked = false
$("izzy").observe('mouseover', function() {
     if(!clicked) {
        $('izzy').setStyle({ color: '#FFFFFF' });
     }
});

$("izzy").observe('mouseout', function() {
     if(!clicked) {
        $('izzy').setStyle({ color: '#666666' });
     }
});

$("izzy").observe('click', function() {
    clicked = true
    $('izzy').setStyle({ color: '#cccccc' });
});
于 2008-11-05T19:07:59.203 に答える
0

ボタンをクリックした後にカーソルをボタンから離すと、最後のイベントはマウスアウトなので、クリックしてもしなくても発生します。

クリック時のマウスアウト効果を回避したい場合は、クリック時にフラグを設定し、フラグが設定されている場合はマウスアウト イベントを中止してみてください。

于 2008-11-05T19:01:20.560 に答える