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 回答