当 hover 超过文本时如何更改图像？ （严格来说是 HTML、CSS 和 JS）

Question

当 (x) 数量的图像位于 (x) 不同的段落旁边时，当悬停在不同的段落上时，如何将图像完全更改为不同的图像，如谷歌在 dart.dev 上所见？

Answer 1

这确实是使用 javascript 完成的，当您关闭 javascript 时它不起作用就证明了这一点。 您要做的是拥有一个img标签并使用 javascript mouseover事件。 你可以这样做：

let img = document.getElementById("img-1");
let link1 = document.getElementById("link-1");
link1.addEventListener('mouseover', () => img.src = 'img1.png');
let link2 = document.getElementById("link-2");
link2.addEventListener('mouseover', () => img.src = 'img2.png');

... (Might want to use a loop)

Answer 2

根据具体的用例，您可以在没有 Javascript 的情况下执行此操作。

在这个片段中，段落和图像的空间位于同一个容器中，然后当将鼠标悬停在段落上时，其关联图像显示为位于（公共）图像 position 的前伪元素的背景图像。

 body { overflow-y: hidden; }.container { position: relative; width: 100%; }.container.image, .container p:hover::before { width: 45%; height: 100%; }.container.image { display: inline-block; }.container div.pwrapper { width: 45%; height: 100vh; display: inline-block; overflow-y: auto; }.container p:hover::before { position: absolute; top: 0; left: 0; content: ''; background-image: var(--bg); background-size: cover; background-position: center center; background-repeat: no-repeat no-repeat; }.container p:nth-child(1) { --bg: url(https://picsum.photos/id/1015/1024/384.jpg); }.container p:nth-child(2) { --bg: url(https://picsum.photos/id/1016/1024/384.jpg); }.container p:nth-child(3):hover { --bg: url(https://picsum.photos/id/1018/1024/384.jpg); }.container p:nth-child(4) { --bg: url(https://picsum.photos/id/1019/1024/384.jpg); }.container p:nth-child(5) { --bg: url(https://picsum.photos/id/1024/1024/384.jpg); }

 <div class="container"> <div class="image"></div> <div class="pwrapper"> <p>First paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Second paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Third paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p>Fourth paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Fifth paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>