0

OK、私は JavaScript を使用して画像の入れ替えを制御しているので、誰かが画像をクリックすると、画像の「点灯」バージョンに変わります。リンクタグ内でこれを行うコードは、リンクonclick="changeto('wdl')"に追加onmouseover="changeto('wdl')"したので、カーソルを合わせると点灯します.

ここで、問題が発生するのは当然のことながら、onmouseout="changeto('wdd')"どちらが照明なしのバージョンの画像であるかを追加したときです。もちろん、ここで何が起こるかというと、カーソルを合わせると点灯し、カーソルを離すと点灯しないバージョンに変わります。しかし、それをクリックすると、イメージが照明されたバージョンに変更されますが、onmouseoutコマンドのために、照明されていないバージョンに変更されます。

私が欲しいのは、画像にカーソルを合わせて点灯させることです。クリックしてマウスを離すと点灯したままになりますが、クリックせずにマウスを離すと、「オフ」の画像のままになります。

助けていただければ幸いです。私はここで困惑しています。なんらかの種類のものを使おうと思ったif (!this)のですが、正直わかりません。

4

2 に答える 2

0

CSSとjavascriptを組み合わせて使用​​する必要があります。cssホバーを検索してマウスオーバー機能を実行し、jsからクリック部分を実行します

w3schoolsのCSSホバーhttp://www.w3schools.com/cssref/sel_hover.asp

于 2012-04-05T02:01:48.710 に答える
0

2つの解決策があります。1。onclick以下で定義されているwdd（またはを使用する）イベントに対して個別のCSSクラスを宣言します。2。に設定されてからテストさ!importantれるフラグ変数を使用します。trueonclickonmouseout

onclick="changeto('wdl');flag=true;" 
onmouseout="if (!flag) changeto('wdd')"

CSSとJavascriptを使用した簡単な例を次に示します。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Example</title>
        <style>
            #whl {
                background: #e0e0ff;
                line-height: 150px;
                text-align: center;
                width: 150px;
            }
            #wdl {
                background: #e0ffe0;
                line-height: 150px;
                text-align: center;
                width: 150px;
            }
            #whl:hover {
                background: #ffcccc;
            }
            #wdl:hover {
                background: #ffcccc;
            }
            #whl.selected {
                background: #ffcccc;
            }
            #wdl.selected {
                background: #ffcccc;
            }
        </style>
        <script>
            function doClick(el) {
                document.getElementById("whl").className = document.getElementById("whl").className.replace( /(?:^|\s)selected(?!\S)/ , '' );
                document.getElementById("wdl").className = document.getElementById("wdl").className.replace( /(?:^|\s)selected(?!\S)/ , '' );
                el.className += "selected";
            }
        </script>
    </head>
    <body>
        <div id="whl" onclick="doClick(this);">WHL</div>
        <div id="wdl" onclick="doClick(this);">WDL</div>
    </body>
</html>

これは色で機能し、あなたの場合、色を背景画像（CSS内）に置き換える必要があります。

于 2012-04-05T02:02:01.077 に答える