在前端开发中，我们可能会遇到需要在页面中实现某个区域高亮显示的需求，而其他部分要变得模糊或颜色变浅。这时候可以通过实现一个“模糊遮罩”来实现。
实现思路
首先，我们需要在 HTML 中添加两个元素。第一个元素用于容纳需要高亮显示的内容，第二个元素则用于添加遮罩效果。为了实现遮罩效果，我们可以使用 CSS3 的 filter 属性中的 blur() 函数，将其应用于第二个元素上。最后，我们再添加一些 JavaScript 代码来控制遮罩的显示和隐藏。
示例代码
HTML
<div class="highlighted-content"> <!-- 这里是需要高亮显示的内容 --> </div> <div class="mask"></div>
CSS
-- -------------------- ---- ------- -------------------- - -- ---------------- -- - ----- - --------- ------ ----- -- ---- -- ------ ----- ------- ----- ----------------- ------- -- -- ----- -- ------------ -- ------- ----------- -- ----------- -- -------- ----- -- ---------- -- -------- ----- -- ---------- -- -
JavaScript
-- -------------------- ---- ------- ----- ---- - -------------------------------- ----- ------------------ - ----------------------------------------------- -------- ---------- - ------------------ - -------- - -------- ---------- - ------------------ - ------- - ------------------------------------------------ ---------- ----------------------------------------------- ----------
以上代码中，我们定义了两个函数 showMask() 和 hideMask() ，它们分别用于显示和隐藏遮罩。在最后几行代码中，我们使用 addEventListener() 添加了鼠标移入和移出事件的监听器，当鼠标移动到需要高亮显示的内容上时，调用 showMask() 函数，隐藏时则调用 hideMask() 函数。
指导意义
通过这个例子，我们可以学到如何使用 CSS3 的 filter 属性来实现模糊效果，以及如何通过 JavaScript 来控制页面元素的显示和隐藏。这些技巧可以应用于许多其他场景中，例如实现全屏弹窗、图片放大镜等效果。
值得注意的是，虽然这个例子看起来很简单，但在实际开发过程中，如果不仔细处理好各种细节，容易导致一些莫名其妙的 bug。因此，在实际开发中，我们需要更加细致地考虑每个细节，并编写完善的测试用例来确保代码的正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11403
