网页特效，显示滑动块位置的内容，隐藏其他位置的内容

Question

要实现的效果：
有一个框，这个框移动到哪，就显示这个地方的内容，其他地方的隐藏。

有什么好的实现思路。

Answer 1

一个div，给他一个足够大的border或者box-shadow，或者 outline均可

.box{
    width:100px;
    height:100px;
    outline:1000px solid #000
}

这样就形成的中间是镂空的，其他地方都是黑色的

Answer 2

刚想的一个、最简单的一种，通过 背景色、字体颜色、元素层级关系 模拟实现

 <div style="**background-color: black**;height: 2em;" >
      <div id="text" style="display: inline-block;color: black;position: relative;height: 2em;z-index: 2;">
      DJHKDKDJDKDJLKDJDDKJD
      </div>
      <div  id="cover" style="left:15px;background-color: #FFFFFF;display: inline-block;position: absolute;height: 2em;width:2em;z-index: 1;"></div>
 </div>

Answer 3

想到两个方案：

1. 用4个 <div> 覆盖到页面上，中间露出一个洞，根据你想要的位置调整。
2. 用 clip-path 属性实现

Answer 4

看上去的确可行，也没有什么兼容问题。
border需要移动的时候减去位置
outline倒是不需要减去上左边距