jquery - 将 div 覆盖在屏幕上，但背景色避开页面区域

Question

我正在开发一个元素，我希望能够在整个页面的顶部覆盖一个 div，但背景颜色应该避免 jquery 选择器占据屏幕区域。

知道如何通过 Google 搜索它是一件很棘手的事情，不幸的是，在做我想做的事情或做我想做的事情方面没有取得任何成功。

下面的屏幕截图显示了我正在尝试做的事情。

例如，我正在考虑执行以下操作:

这个想法是提供一种演示/教程，以便它可以突出显示某些区域并在附近提供一些文本来解释功能或设置等。

例如，我可能有如下内容:

demoLib.show("#btnHighlightMyButton", "Show this text near by");

希望我已经解释了我想要做的事情，这样它才有意义，但如果不让我解释。

所以基本上，问题是如何设置背景渐变但背景避开选择器区域，如屏幕截图所示

Answer 1

我建议使用z-index。

示例:

focus("#button2");

function focus(elem){

  $(elem).css({"z-index":"100"});
  
  $(elem).click(function(){
    console.log($(this).attr("id"))
  })

  let buttonW = $(elem).css("width");
  let buttonH = $(elem).css("height");

  let offset = $(elem).offset();

  let buttonpos = [offset["top"],offset["left"]];

  $('.overlay #focusspot').css(
    {
      "width":parseInt(buttonW)+30+"px",
      //+30 will act like a padding!
      "height":parseInt(buttonH)+30+"px",
      "border-radius":"50%",
      "background":"white",
      "position":"absolute",
      "top":`${buttonpos[0]-15}px`,
      //-15 is half the 30px we added above (to center perfectly)!
      "left":`${buttonpos[1]-15}px`
    }
   );
  
}

body{
  width:100%;
  height:100%;
}
div.container{
  width:100%;
  height:200px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}
button{
  margin: 0px 10px;
  cursor:pointer;
}
div.overlay{
  position:absolute;
  width:100%;
  height:100%;
  background-color:rgba(33, 150, 243, 0.54);
  top:0px;
  left:0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

  <button id="button1">Button one</button>
  <button id="button2">Button two</button>
  <button id="button3">Button three</button>

</div>

<div class="overlay">
  <div id="focusspot"></div>
</div>

我希望这会有所帮助。