JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product">
    <div class="price">$15</div>
    <a class="pdt_btn" href="#">ADD TO CARD</a>
</div>

CSS

.price{
    width : 150px;
    font-size : 18px;    
}

JavaScript

$('.pdt_btn').hide();

$(".product").mouseover(function(){
    
    $(this).find('.price').hide();
    $(this).find('.pdt_btn').show();

}).mouseleave(function(){

    $(this).find('.price').show();
    $(this).find('.pdt_btn').hide();    
    
});