There is a function that adds a class:

$('.co1').click(function() { $(this).addClass("co1hover"); });

It is necessary that when you click on another object, the class is deleted.
Such a spelling:

 $('.closew').click(function() { $('.co1').removeClass("co1hover"); });

It does not work, although it should look like. What's wrong?
Or how to portray it using on('click') ?

 $('.co1').click(function() { $(this).addClass("co1hover"); }); $('.closew').click(function() { $('.co1').removeClass("co1hover"); }); 
 body { margin: 0; font-family: "Open Sans"; padding: 0; } :root { --heightrow: calc(94vh - 2vw); } .grid1 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 6vh calc(var(--heightrow) - 1vw); overflow: hidden; grid-gap: 1vw; } .hed { grid-area: 1 / 1 / 1 / 5; background: red; } .co1 { position: relative; background: #222; -webkit-transition: all 0.7s cubic-bezier(.25, .8, .25, 1); -moz-transition: all 0.7s cubic-bezier(.25, .8, .25, 1); transition: all 0.7s cubic-bezier(.25, .8, .25, 1); width: 24vw; } .co2 { background: #444; -webkit-transition: all 0.9s cubic-bezier(.25, .8, .25, 1); -moz-transition: all 0.9s cubic-bezier(.25, .8, .25, 1); transition: all 0.9s cubic-bezier(.25, .8, .25, 1); width: 24vw; } .co3 { background: #aaa; -webkit-transition: all 1.2s cubic-bezier(.25, .8, .25, 1); -moz-transition: all 1.2s cubic-bezier(.25, .8, .25, 1); transition: all 1.2s cubic-bezier(.25, .8, .25, 1); width: 24vw; } .co4 { background: #ddd; } .co5 { background: #ccc; grid-area: 1 / 1 / 3 / 2; } .co6 { background: #555; grid-area: 2 / 2 / 2 / 5; } .co7 { background: #999; } .co8 { background: #aaa; grid-area: 1 / 3 / 2 / 5; } .cont23 { padding: 1vw 1vw 1vw 1vw; position: relative; z-index: 10; } .co1hover { width: 47vw !important; overflow: hidden; } .co1cont { padding: 2rem; width: 20vw; -webkit-transition: all 1.2s cubic-bezier(.25, .8, .25, 1); -moz-transition: all 1.2s cubic-bezier(.25, .8, .25, 1); transition: all 1.2s cubic-bezier(.25, .8, .25, 1); } .closew { position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: #fff; z-index: 999; } 
 <div class="cont23"> <div class="grid1"> <div class="hed"></div> <div class="co1"> <div class="closew"></div> <div class="co1cont" style="color: #ff0;"> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </div> </div> <div class="co2"></div> <div class="co3"></div> <div class="co4"></div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Click on the first square, close to white in the upper right corner.

  • Add your html to make it clearer why it does not work for you. - Sergey Glazirin
  • In fact, we need not just HTML, but a minimal, self-sufficient and reproducible example . And did you try to debug the code? .closew exists at the time of adding an event handler? Is the handler called? .co1 exists at the time of calling the handler? How do you determine that the class has not disappeared? - Regent
  • @abooksabooks code should be in the question itself, plus it is worth throwing from it all that is not directly related to the question. - Regent
  • The code added, I threw it out of it. - abooks abooks

1 answer 1

Since the .closew block is inside the .co1 block, and the click event is not blocked, then when you click on .closew , both handlers are called: first, the class is deleted, and then added again. You can block the ascent of an event:

 $('.closew').click(function() { $('.co1').removeClass("co1hover"); return false; });
  • thank! works. I did not think about both handlers. - abooks abooks
  • @abooksabooks on health. Yes, it is necessary to monitor and block this ascent, and sometimes the standard behavior. If you are satisfied with the answer, do not forget to mark it as appropriate (checkmark to the left of the answer). - Regent