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
Post a Comment