如何在使 html 页面的其余部分变暗的同时保持悬停区域的背景 color/opacity？
How to keep the background color/opacity of hovered area while darkening the rest of the html page?
我正在尝试编写一个代码，使用户能够将鼠标光标悬停在给定的 html 页面上（我在我的问题中使用了 Lorem Ipsum 文本）。将页面悬停在一定高度的宽度 div 时，会保留原始背景 color/opacity，而 html 的其余部分会变暗。
我只成功地做了相反的事情，使悬停区域变暗，同时将 html 的其余部分保留其原始背景 color/opacity.
感谢帮助。
$("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>
不要创建一个重叠的 div，而是创建两个 div 使背景在用户未悬停的地方不透明。
$("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>
我正在尝试编写一个代码，使用户能够将鼠标光标悬停在给定的 html 页面上（我在我的问题中使用了 Lorem Ipsum 文本）。将页面悬停在一定高度的宽度 div 时，会保留原始背景 color/opacity，而 html 的其余部分会变暗。 我只成功地做了相反的事情，使悬停区域变暗，同时将 html 的其余部分保留其原始背景 color/opacity.
感谢帮助。
$("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>
不要创建一个重叠的 div，而是创建两个 div 使背景在用户未悬停的地方不透明。
$("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>