Repositioned button text not clickable

Question

I've created a button that looks like a document with a label below it by moving the button's text outside of its self with position absolute :

 $('.item-title').hover(function() { $(this).parent().addClass('hover'); }, function() { $(this).parent().removeClass('hover'); }); $('.item-title').on('click', function() { alert('test this') }); 

 .item-button { position: relative; width: 110px; height: 150px; background: #eee; border: #fff solid 2px; box-shadow: 0 0 10px #ccc; transition: all 0.5s ease; margin: 25px; margin-bottom: 40px; } .item-button:hover { color: black; text-shadow: 1px 1px #fff; border: #fff solid 2px; box-shadow: 0 0 20px #999; } .hover { color: black; text-shadow: 1px 1px #fff; border: #fff solid 2px; box-shadow: 0 0 20px #999; } .item-title { position: absolute; top: 160px; left: 0; width: 100%; text-align: center; font-size: 10pt; line-height: 15px; z-index: 999; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="item-button"><span class="item-title">File Title</span></button> 

However I can't seem to get the label that's now floating outside the control to react at all to any mouse events. How can I get it to be clickable and pass its hover state back to its parent?

Edit : Seems this is a browser specific issue to firefox, works correctly in Chrome and IE.

Answer 1

Have you tried to write "e.stoppropagation()" in the click event of the label. this will stop the label to push events to its parents.

Update: I tried binding a click event to your label and it works without an issue,

$('.item-title').on('click',function(){
alert('test this')});

Answer 2

Edit your Css code :

.item-button {
            position: relative;
            width: 110px;
            height: 150px;
            background: #eee;
            border: #fff solid 2px;
            box-shadow: 0 0 10px #ccc;
            transition: all 0.5s ease;
            margin: 25px;
            margin-bottom: 40px;
            z-index : 888;

        }
        .item-button:hover {
                color: black;
                text-shadow: 1px 1px #fff;
                border: #fff solid 2px;
                box-shadow: 0 0 20px #999;
        }
        .hover {
                color: black;
                text-shadow: 1px 1px #fff;
                border: #fff solid 2px;
                box-shadow: 0 0 20px #999;
        }

        .item-title {
            position: absolute;
            top: 160px;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 10pt;
            line-height: 15px;
            z-index: 999;
        }