jquery - 在主页外为覆盖事件处理程序创建样式 Hook

Question

我想创建一个叠加层，当用户将鼠标悬停在主区域之外的页面右侧时，它会出现在页面的右侧。当用户将鼠标悬停在右侧的主要区域之外时，我正在努力想出一种触发事件的方法。需要将某种元素连接到中间部分右侧的外侧，该部分延伸整个 body 的长度。我不确定如何应用此元素。

我在网上寻找解决方案并考虑过以某种方式对元素进行绝对定位，但没有找到任何可行的方法。看起来这应该是一件很简单的事情!

如何添加一个元素以适应不同的窗口宽度并保持在同一位置？

如果解释不完全清楚，我深表歉意，我添加了一个 jsfiddle 作为示例。

HTML:

<div id="main">


    <div class="middlesection">



    </div>

CSS:

#main {
background:#fff;
}

.middlesection {
width:300px;
height:500px;
background:#00c;
margin:0 auto;

http://jsfiddle.net/M7Bn9/

Answer 1

像这样的东西怎么样codepen demo .

您可以给叠加层固定位置并将其放在屏幕的右侧。您可以使用不透明度或变换来隐藏它，并在悬停时显示。