Javascript / remove hover after click close button

Question

Help me please!

Show me please how can I remove hover effect after click close button on the right corner?

I can't figure out how to turn off the effect when you click on the close button

Help me please. I just started to learn javascript, I would like for me to solve this problem, so that I can see how you solved it

I'm insert code snippet!

 $(".close_help").click(function() { $('.close_help').removeClass(".product__element"); setInterval(function() { $('.product__element').addClass('.product__element') }, 100); }); // // $(".close-hover").click(function () { // const resetClose = document.querySelector('.close-hover'); // $(".close-hover").click(function () { // resetClose.style.display = 'none'; // }) // // $('.product__element').removeClass("product__element"); // // setInterval(function () { $('.product__element').addClass('product__element') }, 500); // // });

 .product__element { z-index: 9; background-color: #fbfbfb; width: 20%; margin: 2%; padding: 10px 10px 10px 20px; box-sizing: border-box; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); border-radius: 5px; -webkit-transform: translateY(0); -webkit-transition: all.2s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all.2s cubic-bezier(0.165, 0.84, 0.44, 1); }.prodact_sezon { content: ""; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; z-index: 9; background: rgba(196, 196, 196, 0.4); }.close_help { position: absolute; top: 4px; right: 10px; font-size: 20px; cursor: pointer; }.interact:hover.close_help { display: block; } /*.prodact_sezon.product__element:hover { transform: scale(02); } */.product__element:hover { background-color: white; transform: scale(1.02); box-shadow: 0px 15px 40px 5px rgba(0, 0, 0, .09); z-index: 10; margin-bottom: 0px; }.elem123 { margin-top: -1px; margin-bottom: 0px; display: none; position: absolute; box-shadow: 0 1px 12px 0 rgba(0, 0, 0, .09); }.product__element:hover.elem123 { display: block; background: #FFFFFF; left: 0%; right: 0%; margin-bottom: 0%; padding: 20px; box-shadow: 0px 10px 12px 0 rgba(0, 0, 0, .09); border-radius: 10px; }.product__img { max-width: 80%; height: auto; padding-top: -20px; }.product__name { width: 100%; padding: 1px 5px 10px 5px; text-align: center; font-weight: bold; }.product__name__two { width: 100%; font-size: 15px; padding: 0px 5px 7px 5px; text-align: center; font-weight: regular; }.product__description { width: 100%; font-size: 14px; padding: 10px 2px 2px 2px; text-align: center; font-weight: regular; text-rendering: auto; }.product__price { text-align: center; padding: 10px 5px; /* border: 1px solid #e2e2e2; */ border-radius: 10px; margin-bottom: 0px; color: #edaf26; font-weight: bold; z-index: 330; font-size: 17px; }.product__size { display: flex; align-items: center; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 10px; }.product__size-element { width: 48%; border: 2px solid #e2e2e2; font-size: 14px; padding: 5px; text-align: center; cursor: pointer; box-sizing: border-box; margin-bottom: 0px; border-radius: 10px; }.product__size-element_active { border: 3px solid #76AA6F;important: border-radius; 10px. }:product__add-to-cart-button { width; 100%: height; 45px: display; -webkit-box: display; -ms-flexbox: display; flex: -webkit-box-pack; center: -ms-flex-pack; center: justify-content; center: -webkit-box-align; center: -ms-flex-align; center: align-items; center: border; none: -webkit-appearance; none: border-radius; 10px: background; #76AA6F: color; #fff: cursor; pointer: margin; 15px 0 0: -webkit-transition. ;3s: transition. ;3s: font-size; 16px: outline; none. }:product__add-to-cart-button:hover { background; #63915D: -webkit-transition. ;3s: transition. ;3s; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="product__element interact"> <span class="close_help">&times;</span> <img alt="Манго Махачонок" class="product__img" src="https://unsplash.com/photos/7iLlgS5o09c"> <div class="product__name"> Манго Махачонок </div> <div class="product__price"> <span class="product__price-number">220</span> Грн </div> <div class="elem123"> <div class="product__size"> <div class="product__size-element" data-sb-curent-id-or-vendor-code="003" data-sb-curent-price="220" data-sb-curent-size="1 шт."> 1 шт. </div> <div class="product__size-element" data-sb-curent-id-or-vendor-code="004" data-sb-curent-price="190" data-sb-curent-size="1 кг"> 1 кг. </div> </div> <div class="product__quantity"></div><button class="product__add-to-cart-button" data-sb-id-or-vendor-code="003" data-sb-product-img="images/shop/2-min.png" data-sb-product-name="Манго Махачонок" data-sb-product-price="220" data-sb-product-quantity="003" data-sb-product-size="1 шт."><i class="fas fa-cart-plus"></i> В корзину</button> <div class="product__description"> По вкусовым качествам Mango Махачонок идет на первом месте среди всех тайских сортов. У него самая не волокнистая мякоть. Он самый сладкий. </div> </div> </div>

Answer 1

While mentioning the class in any of these functions(addClass() or removeClass()) you do not start it with . because these functions are all about classes and you just need to specify them.

And to turn off the hover, change your jQuery code to

$(".close_help").click(function() {
   $('div').removeClass("product__element");
   setInterval(function() { 
   $('div').addClass('product__element') 
   }, 1000);
});

Here is the working example of how it works.