Question

这个问题是关于this page上的'鼠标悬停'上的'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);
};

我的问题是：这也适用于鼠标点击。我怎样才能让它工作，以便鼠标点击使文本框保持打开并再次关闭它？单击它应将其设置为单击状态或其他因为我还希望鼠标悬停选项在您尚未单击它时工作。我喜欢鼠标悬停选项，它应该保留，但我希望能够保持盒子打开，这样我就可以使用它里面的内容（复制它，点击链接等）。

基本上这就是我想要的场景; 我希望能够：

将鼠标悬停在文本或按钮上以打开悬停文本框。
点击文字或按钮以保持文本框打开
现在盒子保持打开状态，鼠标不再工作
再次点击文字或按钮关闭复选框
并再次启用鼠标

Answer 1

我修改了your fiddle。

我添加了一个名为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;
        };
    }
};

Javascript文本框鼠标悬停在鼠标上方和鼠标单击上

1 个答案: