如何显示带有悬停效果标题的模态图像？
我有一个响应式图像网格，它运行良好，我很满意。
现在我想向图像添加悬停效果，以便应用白色半透明滤镜，并且文本出现在图像上，并在图像上显示更多详细信息。 我还希望图像在单击时成为模式并弹出。
似乎当我应用悬停效果时，弹出图像停止工作。 谁能告诉我出了什么问题吗？ 注意：我知道悬停效果尚未应用于所有图像。这是因为当我意识到它不起作用时我并没有打扰。
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";
});
<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="modal">
<span class="close">×</span>
<img class="modalImage" id="img01">
</div>
</main>
</body>
</html>
斯蒂芬大帝2回答
-
收到一只叮咚
听起来当光标悬停在图像上时，悬停状态本质上是分层的在可点击图像元素的顶部，因此阻止用户点击它并激活弹出模式。尝试将侦听器添加到悬停状态元素，或者将标题与图像分组，以便可以单击它们。我已将您的示例与下面的代码片段配对。干杯!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> -
qq_笑_17
查看演示：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>
随时随地看视频慕课网APP
相关分类
Html5