在絕對定位的容器中使鏈接可點擊

Question

我正在制作一個畫廊，我正在使用 magnific popup 來創建它，但是我在圖像上有一個 hover 事件，該事件顯示一個圖標表明它可以被查看，所以我必須將其設為絕對 position。 但是，它會阻止圖像可點擊，因此我無法打開畫廊輪播。 我嘗試使用z-index: 1來解決這個問題，但它沒有用。 這是我的代碼：

 $(document).ready(function() { $('.seller-gallery').magnificPopup({ delegate: 'a', type: 'image', tLoading: 'Loading image #%curr%...', mainClass: 'mfp-img-mobile', gallery: { enabled: true, navigateByImgClick: true, preload: [0, 1] // Will preload 0 - before current, and 1 after the current image }, image: { tError: '<a href="%url%">The image #%curr%</a> could not be loaded.', titleSrc: function(item) { return item.el.attr('title') + '<small>by Marsel Van Oosten</small>'; } } }); });

 .grid-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.gallery-item { cursor: pointer; position: relative; z-index: 1; }.gallery-item a { pointer-events: all; }.gallery-item:hover.gallery-item-info, .gallery-item:focus.gallery-item-info { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); }.gallery-item-info { display: none; }.gallery-item-info span { display: inline-block; }.img-fluid { max-width: 100%; height: auto; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> <div class="seller-gallery gallery-item"> <a href="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80"> <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" alt="" class="img-fluid"> </a> <div class="gallery-item-info"> <span><i class="fas fa-eye fa-2x text-white"></i></span> </div> </div>

Answer 1

要解決您的問題，請將pointer-events: none添加到顯示在內容頂部的.gallery-item-info元素。 這意味着它不接受鼠標輸入，因此事件將傳遞到底層內容。

 $(document).ready(function() { $('.seller-gallery').magnificPopup({ delegate: 'a', type: 'image', tLoading: 'Loading image #%curr%...', mainClass: 'mfp-img-mobile', gallery: { enabled: true, navigateByImgClick: true, preload: [0, 1] // Will preload 0 - before current, and 1 after the current image }, image: { tError: '<a href="%url%">The image #%curr%</a> could not be loaded.', titleSrc: function(item) { return item.el.attr('title') + '<small>by Marsel Van Oosten</small>'; } } }); });

 .grid-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.gallery-item { cursor: pointer; position: relative; }.gallery-item a { pointer-events: all; }.gallery-item:hover.gallery-item-info, .gallery-item:focus.gallery-item-info { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); pointer-events: none; }.gallery-item-info { display: none; }.gallery-item-info span { display: inline-block; }.img-fluid { max-width: 100%; height: auto; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> <div class="seller-gallery gallery-item"> <a href="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80"> <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" alt="" class="img-fluid"> </a> <a href="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80"> <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" alt="" class="img-fluid"> </a> <a href="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80"> <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" alt="" class="img-fluid"> </a> <div class="gallery-item-info"> <span><i class="fas fa-eye fa-2x text-white"></i></span> </div> </div>

Answer 2

使用帶有 Font Awesome 的偽元素的替代方法

作為替代方案，您可以改為使用.gallery-item a的偽元素創建圖標和灰色疊加層。 偽元素是鏈接的子元素，因此不會干擾單擊它，並且不需要額外的 span 元素，在我的示例中已將其刪除。 如果需要，它還可以輕松地將覆蓋應用於頁面上的多個鏈接圖像。

此處記錄了 Font Awesome 中偽元素的使用： https://fontawesome.com/v5/docs/web/advanced/css-pseudo-elements

為了解釋，我在這個例子中評論了 CSS：

 $(document).ready(function() { $('.seller-gallery').magnificPopup({ delegate: 'a', type: 'image', tLoading: 'Loading image #%curr%...', mainClass: 'mfp-img-mobile', gallery: { enabled: true, navigateByImgClick: true, preload: [0, 1] // Will preload 0 - before current, and 1 after the current image }, image: { tError: '<a href="%url%">The image #%curr%</a> could not be loaded.', titleSrc: function(item) { return item.el.attr('title') + '<small>by Marsel Van Oosten</small>'; } } }); });

 /* For this example I've made the images display: block so there is no baseline whitespace and I've fixed the image width at 500px; */.gallery-item { width: 500px; }.gallery-item img { display: block; width: 100%; }.gallery-item a { /*Make the icon and overlay position relative to each a link*/ position: relative; }.gallery-item a::before { /* The icon text as per https://fontawesome.com/v5/docs/web/advanced/css-pseudo-elements */ font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 5 Free"; font-weight: 900; /*The icon unicode value as per https://fontawesome.com/icons/eye?s=solid*/ content: "\f06e"; /*Give the icon size*/ font-size: 2em; /*Give the icon color*/ color: #FFF; /*Center the icon and gray overlay*/ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.2); /*A smooth transition from 0 opacity to 1 opacity on hover*/ transition: opacity 0.3s linear; /*Invisible when not hovered*/ opacity: 0; }.gallery-item a:hover::before { /*Visible when hovered*/ opacity: 1; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> <div class="seller-gallery gallery-item"> <a href="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80"> <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" alt=""> </a> <a href="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80"> <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" alt=""> </a> </div>