javascript - 如何使底层元素不可点击/停用？

Question

我有两个元素在彼此之上。当我点击第一个 div 上的按钮时，第二个 div 在第一个 div 之上打开，我想要做的是让底层 div 成为非交互式的(我不能点击底层 div 上的任何东西只要 overlaying-div 是打开的)。

Javascript 代码:

  $('#button').live('click', function()
  {    
      $('#underlaying-div).fadeTo("fast", 0.7);
      $('#overlaying-div).css('display', 'block');

      //Do something here to make the underlaying div unclickable
  });

  $("#overlaying-div").live("click", function() {
     $(this).hide();

     $('#underlaying-div).fadeTo("slow", 1.0);

     //Do something here to make the underlaying div clickable again
  });

CSS 代码:

 #overlay-div
 {
    position:absolute;
    left:0;
    top:0;
    display:none;
    z-index: 20000;    
 }

我知道我可以使用 event.preventDefault() 来确保如果您单击 underlaying-div 中的元素不会发生任何事情，但我宁愿希望当您将鼠标悬停在按钮上时什么也不会发生 (使用 preventDefault()，悬停和其他事情仍然会发生)。

CSS 或 javascript/JQuery 中的任何其他方法可以解决此问题？？

Answer 1

不确定您的最终产品，但如果底层 div 被覆盖层重叠，底层 div 不再可见，您可以只display:block; 底层 div。