如何在使 html 页面的其余部分变暗的同时保持悬停区域的背景颜色/不透明度？

Question

I am trying to write a code that enables the user to hover with the mouse cursor on a given html page (i am using Lorem Ipsum text in my question). While hovering a page wide div of a certain height stays with the original background color/opacity, while the rest of the html gets darken. I only succeeded doing the opposite, darkening the hovered area while leaving the rest of the html with its original background color/opacity.

Appreciate the help.

 $("html").bind("mousemove", function (e) { $("#follower").css({ left: 0, top: e.pageY - 100, }); $("#follower").css("background", "rgba(0,0,0,0.8)"); });

 * { margin: 0; } #follower { position: absolute; display: block; height: 100px; width: 100vw; /* z-index: 999; */ } .lorem { background-color: lightcoral; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="follower"></div> <div class="lorem"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum enim id erat dapibus molestie. Ut enim urna, dictum nec erat sed, tincidunt lacinia enim. Suspendisse felis tellus, tincidunt id fringilla non, hendrerit sit amet velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi ante ante, vehicula in nisl eget, pretium varius ligula. Curabitur et nulla malesuada, convallis nibh vel, viverra dolor. Curabitur quis libero posuere, ultrices nisl id, finibus massa. Sed fermentum sapien et dui eleifend interdum. Maecenas vehicula nunc sed diam vulputate ornare. Praesent urna eros, congue vitae porttitor nec, tempor et eros. Quisque eget condimentum justo. Sed maximus sem sapien, ac aliquet tortor semper non. Nulla in velit facilisis, sollicitudin mauris vitae, ultricies diam. Phasellus varius viverra pellentesque. Suspendisse volutpat mollis nisi, et dapibus dui tristique ac. In vitae blandit est, eget pretium lorem. Suspendisse est augue, porta vel scelerisque in, sollicitudin fermentum lorem. Quisque vestibulum eros eu arcu finibus, ut congue metus cursus. Morbi lacinia et ligula non eleifend. Vivamus sed sagittis lectus. Duis id pellentesque tellus, in malesuada tellus. Duis vulputate justo ac auctor eleifend. Ut egestas urna id felis suscipit consequat. Vivamus iaculis vel justo ac finibus. Sed rhoncus nec magna eget aliquam. Donec quam lorem, eleifend ac dui non, volutpat pretium quam. Curabitur venenatis vel nulla ac molestie. In sed ultrices nibh, a pretium leo. Proin hendrerit ultrices ullamcorper. Quisque iaculis felis ac dolor mollis, non auctor justo pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras vel arcu bibendum, mattis massa ac, viverra lorem. Duis malesuada nisl ligula, ac rhoncus justo vehicula et. Proin suscipit lacus ac risus dignissim porta. Maecenas luctus, lacus non dignissim aliquam, odio augue euismod enim, et tristique lectus ante et eros. Fusce eleifend tortor nisl, ac lobortis mauris dapibus et. Vivamus elementum pulvinar turpis, vel auctor enim commodo nec. Donec suscipit efficitur sapien at gravida. Fusce pulvinar venenatis metus at aliquet. Mauris blandit rutrum erat ut rutrum. Proin rutrum suscipit dui, vitae ornare diam ultrices non. Vivamus feugiat ut dui sollicitudin iaculis. Nunc nec viverra mauris. Ut in mauris sem. Pellentesque eu hendrerit lorem. Sed nec ex ac sapien pellentesque iaculis ut eget sem. Suspendisse potenti. Quisque aliquet aliquam dui vitae dapibus. Donec vel consectetur nibh. Mauris vel semper nunc, ac sodales ligula. Curabitur iaculis felis a lorem pharetra, sed accumsan neque tempus. Vivamus a purus nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc eget eleifend lorem, nec efficitur metus. Morbi gravida ante vel turpis aliquam pellentesque. Duis dignissim rhoncus nisi. Aliquam finibus iaculis tortor, nec ullamcorper nulla rhoncus varius. Etiam lobortis felis in arcu sodales iaculis. Suspendisse potenti. Aenean feugiat ipsum ut egestas pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum enim id erat dapibus molestie. Ut enim urna, dictum nec erat sed, tincidunt lacinia enim. Suspendisse felis tellus, tincidunt id fringilla non, hendrerit sit amet velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi ante ante, vehicula in nisl eget, pretium varius ligula. Curabitur et nulla malesuada, convallis nibh vel, viverra dolor. Curabitur quis libero posuere, ultrices nisl id, finibus massa. </div>

Answer 1

Instead of creating one overlapping div, create two divs that make the background opaque where the user is not hovering.

 $("html").bind("mousemove", function (e) { $("#upper").css({ left: 0, height: e.pageY - 100, }); $("#lower").css({ left: 0, height: "unset", top: e.pageY, }); });

 * { margin: 0; } .overlay { position: absolute; background-color: rgba(0, 0, 0, 0.8); width: 100vw; bottom: 0px; left: 0px; } #upper { top: 0px; } #lower { height: 0vh; } .lorem { background-color: lightcoral; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="upper" class="overlay"></div> <div id="lower" class="overlay"></div> <div class="lorem"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum enim id erat dapibus molestie. Ut enim urna, dictum nec erat sed, tincidunt lacinia enim. Suspendisse felis tellus, tincidunt id fringilla non, hendrerit sit amet velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi ante ante, vehicula in nisl eget, pretium varius ligula. Curabitur et nulla malesuada, convallis nibh vel, viverra dolor. Curabitur quis libero posuere, ultrices nisl id, finibus massa. Sed fermentum sapien et dui eleifend interdum. Maecenas vehicula nunc sed diam vulputate ornare. Praesent urna eros, congue vitae porttitor nec, tempor et eros. Quisque eget condimentum justo. Sed maximus sem sapien, ac aliquet tortor semper non. Nulla in velit facilisis, sollicitudin mauris vitae, ultricies diam. Phasellus varius viverra pellentesque. Suspendisse volutpat mollis nisi, et dapibus dui tristique ac. In vitae blandit est, eget pretium lorem. Suspendisse est augue, porta vel scelerisque in, sollicitudin fermentum lorem. Quisque vestibulum eros eu arcu finibus, ut congue metus cursus. Morbi lacinia et ligula non eleifend. Vivamus sed sagittis lectus. Duis id pellentesque tellus, in malesuada tellus. Duis vulputate justo ac auctor eleifend. Ut egestas urna id felis suscipit consequat. Vivamus iaculis vel justo ac finibus. Sed rhoncus nec magna eget aliquam. Donec quam lorem, eleifend ac dui non, volutpat pretium quam. Curabitur venenatis vel nulla ac molestie. In sed ultrices nibh, a pretium leo. Proin hendrerit ultrices ullamcorper. Quisque iaculis felis ac dolor mollis, non auctor justo pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras vel arcu bibendum, mattis massa ac, viverra lorem. Duis malesuada nisl ligula, ac rhoncus justo vehicula et. Proin suscipit lacus ac risus dignissim porta. Maecenas luctus, lacus non dignissim aliquam, odio augue euismod enim, et tristique lectus ante et eros. Fusce eleifend tortor nisl, ac lobortis mauris dapibus et. Vivamus elementum pulvinar turpis, vel auctor enim commodo nec. Donec suscipit efficitur sapien at gravida. Fusce pulvinar venenatis metus at aliquet. Mauris blandit rutrum erat ut rutrum. Proin rutrum suscipit dui, vitae ornare diam ultrices non. Vivamus feugiat ut dui sollicitudin iaculis. Nunc nec viverra mauris. Ut in mauris sem. Pellentesque eu hendrerit lorem. Sed nec ex ac sapien pellentesque iaculis ut eget sem. Suspendisse potenti. Quisque aliquet aliquam dui vitae dapibus. Donec vel consectetur nibh. Mauris vel semper nunc, ac sodales ligula. Curabitur iaculis felis a lorem pharetra, sed accumsan neque tempus. Vivamus a purus nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc eget eleifend lorem, nec efficitur metus. Morbi gravida ante vel turpis aliquam pellentesque. Duis dignissim rhoncus nisi. Aliquam finibus iaculis tortor, nec ullamcorper nulla rhoncus varius. Etiam lobortis felis in arcu sodales iaculis. Suspendisse potenti. Aenean feugiat ipsum ut egestas pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum enim id erat dapibus molestie. Ut enim urna, dictum nec erat sed, tincidunt lacinia enim. Suspendisse felis tellus, tincidunt id fringilla non, hendrerit sit amet velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi ante ante, vehicula in nisl eget, pretium varius ligula. Curabitur et nulla malesuada, convallis nibh vel, viverra dolor. Curabitur quis libero posuere, ultrices nisl id, finibus massa. </div>