Cancel a hover on an item when clicking on it

Question

I tried to reproduce my situation in codepen . Below is the executable code.
The principle is as follows:

Hover red square, it expands.
As expanded, click on the center, after the click does not move the cursor .
After the click, another square appeared in place of red, its former size. If you try to turn the mouse over this small square, the red hover will disappear and it will decrease in size.

So, how after a click to complete the hover on the red square, so that its transition returns to its original position? If you do not turn the mouse, the red box will be displayed after the click.
The markup cannot be changed at all , I count on the solution through js by 90%, the rest is css, but here it is unlikely he will be able to help ...

$(".one, .two").click(function(){ $(".two").toggleClass('show'); });

 html { height: 100%; } html body { display: flex; justify-content: center; align-items: center; padding: 0; margin: 0; position: relative; height: 100%; } html body span { display: block; width: 100px; height: 100px; transition: all 300ms ease 0s; } html body .one { background-color: red; } html body .one:hover { width: 120px; height: 120px; } html body .two { position: absolute; background-color: blue; top: 0; left: 0; right: 0; bottom: 0; margin: auto; opacity: 0; visibility: hidden; } html body .two.show { opacity: 0.5; visibility: visible; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="one"></span> <span class="two"></span>

the simplest thing is to add a click-on class whose settings will be interrupted by hover settings
Grudy, and so there already is a class on a class with a class, I would not want to tie everything up on classes ... I assumed that there is some handler on js for this.
Grudy, dug up something in the meantime: habrahabr.ru/post/113073
@VostokSisters, I ask you, from now on, to immediately clarify all the nuances that would not substitute other users

Yuri yuri 13.3k 5 gold signs 39 silver marks 83 bronze marks · Accepted Answer · 2017-01-24T20:07:16

Add an additional class and specify in CSS that increasing only when an element does not have this class:

 $(".one, .two").click(function(){ $(".two").toggleClass('show'); $(".one").toggleClass('no-hover'); });

 html { height: 100%; } html body { display: flex; justify-content: center; align-items: center; padding: 0; margin: 0; position: relative; height: 100%; } html body span { display: block; width: 100px; height: 100px; transition: all 300ms ease 0s; } html body .one { background-color: red; } html body .one:hover:not(.no-hover) { width: 120px; height: 120px; } html body .two { position: absolute; background-color: blue; top: 0; left: 0; right: 0; bottom: 0; margin: auto; opacity: 0; visibility: hidden; } html body .two.show { opacity: 0.5; visibility: visible; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="one"></span> <span class="two"></span>

But I don’t understand how it works: D Explain this line for the child, please: .one:hover:not(.no-hover) , how is it performed?
@VostokSisters, it means that you need to perform hover only if the element does not have a class .no-hover
In my case, instead of a specific .one class, .one will be a specific article tag.
If you write .article:hover:not(.no-hover) , then the style will apply to all article tags?
Or is it like thinking that article:hover is written, then the hover is applied to all the elements with a hover?)
@VostokSisters, hover will apply to all .article only if they do not have the class .no-hover
And what if I want to ban all articles of a hover when I clicked on one of them?
Only a class of 500 artillery numbers need not be tugged) How then is a selector to be written?

Answer 2 · 2017-01-24T19:46:29

When you click, switch the active class to the first span; add to the active class the same properties as with hover.

 $(".one, .two").click(function(){ $(".two").toggleClass('show'); $(".one").toggleClass('active'); });

 html { height: 100%; } html body { display: flex; justify-content: center; align-items: center; padding: 0; margin: 0; position: relative; height: 100%; } html body span { display: block; width: 100px; height: 100px; transition: all 300ms ease 0s; } html body .one { background-color: red; } html body .one:hover, html body .one.active { width: 120px; height: 120px; } html body .two { position: absolute; background-color: blue; top: 0; left: 0; right: 0; bottom: 0; margin: auto; opacity: 0; visibility: hidden; } html body .two.show { opacity: 0.5; visibility: visible; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="one"></span> <span class="two"></span>

And why didn’t he advise you to just put the span in the span?
In general, everything is painted on points, but still they did not understand me.
In the original problem, span1 - picture, span2 - overlay on the whole screen, what should I swap?
If you click on the picture, the overlay will come out, and if this does NOT remove the cursor from the beginning to the end, the hover in the picture will continue to exist.
If there are any strict parameters that must be met, then you should write about it explicitly) I will redo the answer.
I quote from the question: “So, how after a click to complete the hover on the red square, so that its transit returns to its original position?”
I do not find fault specifically, such a question ... On click - a lilac square showing, at the same time - a return to the initial state of red, and all this without moving the cursor.

Cancel a hover on an item when clicking on it

2 answers 2

More articles: