Css hovering and overlapping elements problem [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 2 years ago.

Improve this question

Here's codepen link with button I'd like to use on my website: https://codepen.io/nikolett_codes/pen/BMmOxO

here's HTML code:

<div class="phone cta">Call us</div>
<div class="phone number">(453) 416-4742</div>

And the problem: https://i.sstatic.net/SKn2N.gif

Let's say "OP" is .cta original position, "NP" is .cta new position. What is annoying is that if you hover over cta element and then move your cursor over it (at NP), the animation is not interrupted. Hover, when you hover over OP when .cta div is at NP (so basically hovering over .number div) it interrupts and goes back to OP. How can i deal with it?

One way would be making transition when hovering over .number, but it's not possible because of z-index, so the animation will never start. Another way would be to get .number position and apply eventlistener to this area, I suppose? What is the best way to deal with this problem?

A proper minimal reproducible example of your issue belongs directly into your question, please do not just dump the whole thing onto an external platform. — C3roe
– C3roe, Commented Apr 26, 2023 at 8:00
"Hover, when you hover over OP when .cta div is at NP (so basically hovering over .number div) it interrupts and goes back to OP." - of course it does, because now you are hovering over an element, that has nothing to do with triggering the effect in the first place. You should wrap both into an additional element, and then apply the :hover on that. — C3roe
– C3roe, Commented Apr 26, 2023 at 8:02
@CBroe and to think that I already had wrapper with both elements for other reasons, yet failed to think about this hovering solution... Thank you so much, also thanks for feedback regarding my question — Akash Kumar
– Akash Kumar, Commented Apr 26, 2023 at 8:09

Valkenum .n · Accepted Answer · 2023-04-26 08:21:25Z

1

One way to solve this problem is to wrap both the .phone.cta and .phone.number divs inside a container div, and apply the :hover pseudo-class to the container instead of the .phone.cta div.

<div class="phone-container">
  <div class="phone cta">Call us</div>
  <div class="phone number">(453) 416-4742</div>
</div>

And add this to the css :

.phone-container {
      position: relative;
   }
    
   .number {
      z-index: 0;
      position: relative;
   }
   .phone-container:hover .cta {
      transform: translateX(-80%);
      transition: 1.2s;
   }

answered Apr 26, 2023 at 8:21

Valkenum .n

362 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Css hovering and overlapping elements problem [closed]

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related