如何顯示帶有 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.