javascript - 如何显示带有悬停效果标题的模态图像？

标签 javascript html css modal-dialog 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>

最佳答案

欢迎来到论坛:)

听起来当光标悬停在图像上时，悬停状态本质上是分层在可点击图像元素的顶部，因此阻止用户点击它并激活弹出模式。尝试将监听器添加到悬停状态元素，或者将标题与图像分组，以便可以单击它们。我已将您的示例与下面的代码片段配对。

干杯! 

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>

关于javascript - 如何显示带有悬停效果标题的模态图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61195131/

上一篇：javascript - 监听mapbox addLayer 和removeLayer

下一篇：javascript - 如何防止 GeolocateControl 缩小

相关文章：

css - 在 tinymce 编辑器中更改所选文本的样式(不是蓝色背景突出显示)

css - 如何确保没有内容的div能够获得父div的高度？

带有手写信息下划线的 HTML 表单

javascript - PyQt - QObject 未定义

javascript - RxJS 5.0 "do while"类机制

javascript - 使用 javascript 访问经典的 asp 应用程序对象

javascript - 获取div的父级的父级

jquery - 调整窗口大小时多次调用函数 [JQuery]

javascript - 隐含的全局变量不会被捕获为 linter 错误

javascript - 对象数据覆盖所有以前的数据

©2024 IT工具网  联系我们