There is an element

.myclass { background-color: #28292d; font-family: Roboto, "sans-serif", Arial; border-width: 0px; border-style: outset; border-radius: 3px; position: absolute; bottom: -220px; right: 0px; transition: 0.5s; width: 500px; height: 250px; color: #ffdd47; } .myclass:hover { bottom: 0px; } 
 <div class="myclass"> <div class="push"> <!--код!--> </div> <!--код!--> </div>

Accordingly, when you hover on an element with a mouse, it pops up completely from under the page.

The child element of the "push" class will be outside this element, just above

How to make it not apply to it: hover of the parent element?

That is, when you hover the mouse on a child, the parent and child did not pop up?

1 answer 1

If the child element should not react at all to mouse events, then pointer-events can be used on it: none;

 .container { background-color: #28292d; position: relative; width: 200px; height: 80px; color: #ccc; } .container:hover { background-color: red; } .item { width: 80px; height: 80px; position: absolute; right: -40px; bottom: -40px; background-color: green; pointer-events: none; opacity: 0.7; } 
 <div class="container"> container <div class="item"> Элемент внутри container </div> <!--код!--> </div>

  • @humster_spb How does this change nothing? Judging by the task, the internal element is moved out of the block and it is necessary that when you hover over this element, the block is not animated, and animated only if it is directed at the block itself. I ran a part of the indoor unit on the parent to demonstrate how this mouse event responds to the internal element outside the parent. Maybe I misunderstood the question, but in the case that I described, we get the desired result - l2banners
  • and, not, everything is ok - sorry) I watched your example, and thought about surfacing - humster_spb
  • Yes, it almost helped) And as I understand it, there are no ways to leave just a click in the mouse events - Andrei Grigoriev
  • @Andrey Grigoriev If you describe the task more precisely, we will tell you, otherwise we do not understand each other. - l2banners
  • You have understood the problem absolutely correctly) A child element is a pop-up message with a close cross. There is nothing more to press there. If it were possible to click on the cross so that everything would not pop up - it would be great) - Andrey Grigoriev