Empty an element event under another element

Question

So, I have some spanand buttonright behind him. And all I want to do is hide the element spanand fire the button-click event when the pointer is in the place of the button

But I cannot do this because the click event goes directly to the span-event handler . I tried to do this with pointer-events: none, but in this case, I cannot connect mouseover-events.

Also tried to set CSS display: none, but in this case the event handler will not be attached

Is there any way to do this?

$('#myspan').on('mouseenter', function (event) {
        $(this).animate({ 'opacity': 0 });
    });

    $('#myspan').on('mouseleave', function (event) {
        $(this).animate({ 'opacity': 0.5 });
    });
    
    $('#clicker').on('click', function(event) {
    	alert('result');
    })

#myspan {
    position: fixed;
    font-size: 22px;
    z-index:500;
    position: fixed;
    left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='myspan'>{{property}}</span>
<button id='clicker' style='width: 250px; height: 20px; left: 40%; z-index: -1; position: absolute'>
  Clicker
</button>

Run codeHide result

Answer 1

- CSS, , display: none;

, , 0 , : -500px. , , . . .

#myspan {
  position: fixed;
  font-size: 22px;
  z-index: 500;
  width: 250px;
  height: 2rem;
  position: fixed;
  left: 40%;
  animation: fadeIn 1s;
  text-align: center;
}

#myspan:hover {
  opacity: 0;
  animation: fadeOut 1s;
}

div {
  display: block;
  position: fixed;
  left: 40%;
  z-index: 50;
  width: 250px;
  height: 2rem;
  text-align: center;
}

div:hover + span {
  opacity: 0;
  bottom: -500px;
  display: none;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    bottom: -500px;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    bottom: -500px
  }
  1% {
    bottom: auto;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='clicker'>
  Clicker
</div>
<span id='myspan'>{{property}}</span>

Hide result

Answer 2

    $('#clicker').on('click', function(event) {
    	alert('result');
    })

    $('#myspan').on('mouseenter', function (event) {
        $(this).animate({ 'opacity': 0 });
        $('#clicker').click()
    });

    $('#myspan').on('mouseleave', function (event) {
        $(this).animate({ 'opacity': 0.5 });
    });
    
   

#myspan {
    position: fixed;
    font-size: 22px;
    z-index:500;
    position: fixed;
    left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='myspan'>{{property}}</span>
<button id='clicker' style='width: 250px; height: 20px; left: 40%; z-index: -1; position: absolute'>
  Clicker
</button>

Hide result

Answer 3

span :after pseudo. , , . .

$('#clicker').on('click', function(event) {
  alert('result');
})

  
#clicker:after {
  content: "{{property}}";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#clicker:hover:after {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='clicker' style='width: 250px; height: 20px; left: 40%; z-index: -1; position: absolute'>
  Clicker
</button>

Hide result

Answer 4

, , , .

<script>
    $('#clicker').on('mouseenter', function (event) {
        $('#myspan').animate({ 'opacity': 0 });
        $(this).click();
    });

    $('#clicker').on('mouseleave', function (event) {
        $('#myspan').animate({ 'opacity': 0.5 });

    });

    $('#clicker').on('click', function (event) {
        alert('result');
    })
</script>

Answer 5

!

$('#myspan').on('mouseenter', function (event) {
    $(this).animate({ 'opacity': 0 }, 500).delay(400).queue(function (next) { 
      $(this).css('display', 'none'); 
      next(); 
    });
});

$('#clicker').on('mouseleave', function (event) {
    $('#myspan').css('display', 'block').animate({ 'opacity': 0.5 });
});

$('#clicker').on('click', function(event) {
  alert('result');
})

#myspan {
    position: fixed;
    font-size: 22px;
    z-index:500;
    position: fixed;
    left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='myspan'>{{property}}</span>
<button id='clicker' style='width: 250px; height: 20px; left: 40%; z-index: -1; position: absolute'>
  Clicker
</button>

Hide result