懸停在絕對定位元件註冊一個鼠標移出

Question

See issue here

當我將鼠標懸停在圖像，則其放大，但是當我懸停在字幕，變焦復位。它就像絕對定位的元素註冊一個鼠標。

.tint { 
    overflow: hidden; 
    float: left; 
    background-color:#111; 
    margin: 0 20px 20px 0; 
    } 


figure { 
    display: block; 
    position: relative; 
    float: left; 
    overflow: hidden; 
    margin: 0 20px 20px 0; 
} 

figcaption { 
    position: absolute; 
    width:75%; 
    color: white; 
    padding: 5px; 
    opacity: 0; 
    -webkit-transition: all 0.6s ease; 
    -moz-transition: all 0.6s ease; 
    -o-transition:  all 0.6s ease; 
    font-family:Cachet; 
    text-align:center; 
    z-index:1000; 
} 

figure:hover figcaption { 
    opacity: 1; 
} 

figcaption:hover 
{ 

} 

figure:before { 
    position: relative; 
    font-weight: 800; 
    background: black; 
    background: rgba(255,255,255,0.75); 
    text-shadow: 0 0 5px white; 
    color: black; 
    width: 24px; 
    height: 24px; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius:   12px; 
    text-align: center; 
    font-size: 14px; 
    line-height: 24px; 
    -moz-transition: all 0.6s ease; 
    opacity: 0.75; 
} 

figure:hover:before { 
    opacity: 0; 
} 

.cap-bot:before { bottom: 0%; left: 0%; } 
.cap-bot figcaption { left: 15%; bottom: 0%;} 
.cap-bot:hover figcaption { bottom: 30%;left:15%;} 

.zoom 
{ 
    -moz-transform: scale(1.5); 
    -webkit-transform: scale(1.5); 
    transition: transform 1s; 
    opacity: .5; 
    cursor: pointer;  
] 


.gallery_grid_image { 
    display: block; 
    -moz-transition: opacity .3s linear; 
    -webkit-transition: opacity .3s linear; 
    -ms-transition: opacity .3s linear; 
    -o-transition: opacity .3s linear; 
    transition: opacity .3s linear; 
} 

任何想法？我正在使用Jquery添加縮放類。

  $(".comment_preview").on({ 
       "mouseover" : function() { 
        $(this).find('.gallery_grid_image').addClass('zoom'); 
       }, 
       "mouseout" : function() { 
        $(this).find('.gallery_grid_image').removeClass('zoom'); 
       } 
      });   

Answer 1

使用pointer-event: none;來告訴一切忽略該元素。

MDN: pointer-events