如何显示带有 hover 效果字幕的模态图像？
[英]How do I display modal images with hover effect captions?
问题描述
我有一个响应式图像网格，它工作正常，我很满意。
现在我想在图像中添加 hover 效果，以便应用白色半透明滤镜，并在图像上显示文本，并在图像上显示更多细节。 我还希望图像在单击时成为模态并弹出。
似乎当我应用 hover 效果时，弹出图像停止工作。 谁能告诉我出了什么问题？ 注意：我知道 hover 效果尚未应用于所有图像。 这是因为当我意识到它不起作用时我没有打扰。
var modalEle = document.querySelector(".modal"); var modalImage = document.querySelector(".modalImage"); Array.from(document.querySelectorAll(".ImgThumbnail")).forEach(item => { item.addEventListener("click", event => { modalEle.style.display = "block"; modalImage.src = event.target.src; }); }); document.querySelector(".close").addEventListener("click", () => { modalEle.style.display = "none"; });
img { border: 2px solid; min-height: 100px; min-width: 100px; } body { max-width: 1024px; margin-left: auto; margin-right: auto; font-family: verdana } /*MAIN*/ main { margin: 200px 0 100px 0; height: auto; max-width: 1024px; color: #66704D; letter-spacing: 3px; }.row { display: flex; flex-wrap: wrap; padding: 0 4px 4px 2%; }.column { flex: 31.3%; max-width: 31.3%; padding: 0 4px; }.column img { margin-top: 8px; vertical-align: middle; width: 100%; } /*overlay*/.container { position: relative; width: 100%; }.ImgThumbnail { display: block; width: 100%; height: auto; }.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: rgba(255,255,255,0.9); }.container:hover.overlay { opacity: 1; }.text { color: #66704d; font-size: 20px; letter-spacing: 5px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } /*modal*/.ImgThumbnail { cursor: pointer; transition: 0.3s; }.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(255, 255, 255,0.85); }.modalImage { margin: auto; display: block; width: 100%; height: auto; max-width: 1024px; }.close { position: absolute; top: 15px; right: 35px; color: #66704d; font-size: 40px; font-weight: bold; transition: 0.3s; }.close:hover, .close:focus { cursor: pointer; } @media only screen and (max-width: 700px) {.modalImage { width: 100%; } } /*Tablet*/ @media (max-width:768px) {.column { flex: 47%; max-width: 47%; } /*Mobile*/ @media (max-width:400px) {.column { flex: 100%; max-width: 100%; } }
<html> <body> <.--MAIN CONTENT--> <main> <div class="row"> <div class="column"> <div class="container"> <img class="ImgThumbnail" src="images/Painting/Oranges in Berlin.jpg" alt=""> <div class="overlay"> <div class="text">caption content</div> </div> </div> <img class="ImgThumbnail" src="images/Painting/Bread Rolls.jpeg" alt=""> <img class="ImgThumbnail" src="images/Painting/the Market.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Life Drawing with card.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Copy of The Carrofs IV.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The Carrofs I,JPG" alt=""> <img class="ImgThumbnail" src="images/Painting/The Trig. from memory.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The Beacon.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Farm on the Hill.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Terrace Sunlight.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Across the Road.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Back Lane I.jpg" alt=""> </div> <div class="column"> <img class="ImgThumbnail" src="images/Painting/Cloud Study.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/ London Bodies.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The Cloud.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Life Drawing II.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Copy of The Carrofs III.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The cow Field,jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Bridal Veil. from memory.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The Sheep_s Pool.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Bunyan_s Valley.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Terrace Sunlight Study II.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The Back Lane.jpg" alt=""> </div> <div class="column"> <img class="ImgThumbnail" src="images/Painting/Maria_s House.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/on The Tube.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Ben.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Life Drawing I.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The Carrofs II.JPG" alt=""> <img class="ImgThumbnail" src="images/Painting/Aotea Harbor.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Aotea from description I.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/The Valley.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Bunyans Oak.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Terrace Sunlight Study I.jpg" alt=""> <img class="ImgThumbnail" src="images/Painting/Back Lane II.jpg" alt=""> </div> </div> <div class="modal"> <span class="close">×</span> <img class="modalImage" id="img01"> </div> </main> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2020-04-13 20:16:32
欢迎来到论坛：）
听起来当 cursor 悬停在您的图像上时，hover state 基本上是在您的可点击图像元素之上分层的，因此阻止用户点击它并激活弹出窗口。 尝试将您的听众添加到您的 hover state 元素中，或者将标题与图像分组，这样它们都可以被点击。 我已经为下面的这个片段配对了你的例子。
干杯!
var modalEle = document.querySelector(".modal"); var modalImage = document.querySelector(".modalImage"); Array.from(document.querySelectorAll(".overlay")).forEach(item => { item.addEventListener("click", event => { modalEle.style.display = "block"; modalImage.src = event.target.parentNode.querySelector(".ImgThumbnail").src; }); }); document.querySelector(".close").addEventListener("click", () => { modalEle.style.display = "none"; });
body { color: #66704D; letter-spacing: 3px; } /*overlay*/.container { position: relative; width: 300px; height: 200px; }.ImgThumbnail { display: block; width: 100%; height: auto; }.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: rgba(255, 255, 255, 0.9); }.container:hover.overlay { opacity: 1; }.text { color: #66704d; font-size: 20px; letter-spacing: 5px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } /*modal*/.ImgThumbnail { cursor: pointer; transition: 0.3s; }.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(255, 255, 255, 0.85); }.modalImage { margin: 0 auto; display: block; width: 80%; height: auto; max-width: 1024px; }.close { position: absolute; top: 15px; right: 35px; color: #66704d; font-size: 40px; font-weight: bold; transition: 0.3s; }.close:hover, .close:focus { cursor: pointer; } @media only screen and (max-width: 700px) {.modalImage { width: 100%; } }
<div class="container"> <div class="imgGroup"> <img class="ImgThumbnail" src="https://placehold.it/300x200" alt=""> <div class="overlay"> <div class="text">caption content</div> </div> </div> </div> <div class="modal"> <span class="close">×</span> <img class="modalImage" id="img01"> </div>
解决方案2
0 2020-04-13 19:52:33
查看演示： https://codepen.io/turibamwe/pen/xxwGozx
使用这个 javascript：
<script>
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail + .overlay")).forEach(item => {
var itemImage = item.parentNode.firstElementChild.getAttribute("src");
item.addEventListener("click", event => {
modalEle.style.display = "block";
modalImage.src = itemImage//event.target.src;
});
});
document.querySelector(".close").addEventListener("click", () => {
modalEle.style.display = "none";
});
</script>
如何在Ishimoto中获取图像上的悬停字幕
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.