Как сделать чтобы функция выполнялась только тогда, когда выполнились оба условия? Необходимо, чтобы блок становился серым только при условии, когда нажата кнопка И курсор был убран с самого блока. Сейчас на mouseleave не реагирует
$reservation.on("click mouseleave", function () {
$(this).text("Подробнее");
$(this).parent().css("filter", "grayscale(100%)");
});
.block{
width: 200px;
height: 175px;
display: inline-block;
filter: grayscale(0%);
transition: 1s;
color: steelblue;
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
<img src="https://picsum.photos/id/223/200/150" alt="">
text
<button class="button">Button</button>
</div>
<div class="block">
<img src="https://picsum.photos/id/222/200/150" alt="">
text
<button class="button">Button</button>
</div>
<div class="block">
<img src="https://picsum.photos/id/225/200/150" alt=""/>
text
<button class="button">Button</button>
</div>