jquery - Make links in both underlying and overlying divs clickable -


in panel have link.

at bottom right corner of panel have overlay element take on whole div when hovered.

in overlying element, have link.

my problem link in overlying element not clickable.

here code :

.panel-default1 {    padding-top: 10px;    border-radius: 20px;    box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);    height: 400px;    width: 400px;    overflow: hidden;    margin: 0 auto;    position: relative;  }    .amg-corner-button_wrap {    display: block;    background-color: #e8c63d;    position: absolute;    transform: rotate(45deg);    right: -320px;    bottom: -320px;    width: 400px;    height: 400px;    -moz-transition: 0.5s ease-out;    -o-transition: 0.5s ease-out;    -webkit-transition: 0.5s ease-out;    transition: 0.5s ease-out;  }    .amg-corner-button_wrap:hover {    transform: rotate(45deg) scale(4);  }    .overlay-content {    pointer-events: none;    bottom: 0;    color: #333;    left: 0;    opacity: 0;    padding: 30px;    position: absolute;    height: 100%;    width: 100%;    box-sizing: border-box;    padding: 8px;    right: 0;    top: 0;    -moz-transition: 0.3s ease-out;    -o-transition: 0.3s ease-out;    -webkit-transition: 0.3s ease-out;    transition: 0.3s ease-out;  }    .overlay-content h2 {    border-bottom: 1px solid #333;    padding: 0 0 12px;  }    .amg-corner-button_wrap:hover~.overlay-content {    opacity: 1;    -moz-transition: 0.3s ease-out;    -o-transition: 0.3s ease-out;    -webkit-transition: 0.3s ease-out;    transition: 0.3s ease-out;    -moz-transition-delay: 0.3s;    -o-transition-delay: 0.3s;    -webkit-transition-delay: 0.3s;    transition-delay: 0.3s;  }
<div class="panel panel-default1">    <div class="panel-body">      <a href="#">link</a>      <div class='amg-corner-button_wrap'></div>        <div class="overlay-content">        <h2>image ink logo</h2>        <a href="#">link</a>      </div>      </div>    <!-- panel body -->    </div>  <!-- panel default -->

i believe issue comes pointer-events: none; in class .overlay-content . however, if rid of it, both links become unclickable.

fiddle : https://jsfiddle.net/y2auh7gn/


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -