0

この質問は、このページの「Javascript テキスト ボックス ホバー オン マウス オーバー」コードに関するものです。

脚本：

var oVTog = {
toggle: function (el) {

    var container  = el.parentNode;
    var para = container.getElementsByTagName('p')[0];  
    para.style.display = "none";

    el.onmouseover = function () {
                  para.style.display = '';
                  return false;
            };
    el.onmouseout = function () {
                  para.style.display = 'none';
                  return false;
            };
    el.onclick = function () {
                  para.style.display = para.style.display == 'none' ? '' : 'none';
                  return false;
            };
    }
};
window.onload = function () {
var l = document.getElementById('togTrigger');
oVTog.toggle(l);
var l = document.getElementById('togTrigger2');
oVTog.toggle(l);
};

私の質問は次のとおりです。これはマウスクリックでも機能します。マウスクリックでテキストボックスを開いたままにし、再び閉じるようにするにはどうすればよいですか? まだクリックしていないときにマウスオーバーオプションを機能させたいので、クリックするとクリックされた状態または何かに設定する必要があります。私はマウスオーバーオプションが好きで、保持する必要がありますが、ボックスを開いたままにして、その中のコンテンツを使用できるようにしたいです (コピー、リンクをクリックなど)。

基本的に、これは私が望むシナリオです。私はできるようにしたい:

  1. テキストまたはボタンの上にマウスを移動して、ホバリング テキスト ボックスを開きます。
  2. テキストボックスを開いたままにするには、テキストまたはボタンをクリックします
  3. ボックスが開いたままになり、マウスオーバーが機能しなくなりました
  4. テキストまたはボタンをもう一度クリックして、ボックスを閉じます
  5. マウスオーバーを再度有効にします
4

1 に答える 1

1

あなたのフィドルを変更しました。

という変数を追加しましたisClicked。mouseoutクリック時に設定することで、ハンドラで要素を非表示にすることを無視できます。

var oVTog = {
    toggle: function (el) {
        var container  = el.parentNode;
        var para = container.getElementsByTagName('p')[0];
        para.style.display = "none";

        // create variable
        var isClicked = false;

        el.onmouseover = function () {
            para.style.display = '';
            return false;
        };
        el.onmouseout = function () {
            // ignore if button was clicked
            if(!isClicked)
                para.style.display = 'none';

            return false;
        };
        el.onclick = function () {
            // if it's clicked, change it to TRUE
            // if it's clicked again, change it back to FALSE

            isClicked = !isClicked; // toggle

            para.style.display = ((isClicked) ? '' : 'none');
            return false;
        };
    }
};
于 2013-03-20T13:00:19.853 に答える