The issue with element hovering and overlapping in CSS

Check out this Codepen link which has a button I want to integrate into my website: https://codepen.io/nikolett_codes/pen/BMmOxO

Here is the HTML code:

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

However, there seems to be an issue: https://i.sstatic.net/SKn2N.gif

The problem arises when hovering over the .cta element at its new position (NP) after moving the cursor from its original position (OP). The animation does not interrupt as expected. Strangely, if you hover over the OP while the .cta div is at NP (essentially hovering over the .number div), it interrupts and reverts back to the original position. What would be the best approach to tackle this challenge?

One solution could involve triggering a transition when hovering over the .number, but due to z-index constraints, the animation might not initiate. Another method might be to determine the .number position and attach an event listener to that area. Would that be the most effective way to address this issue?

csshovertransitionoverlapping

Answer №1

If you want to tackle this issue, consider enclosing both the .phone.cta and .phone.number elements within a parent container div. Then, instead of applying the :hover pseudo-class directly to the .phone.cta div, target the parent container.

<div class="phone-wrapper">
  <div class="phone cta">Contact Us</div>
  <div class="phone number">(555) 123-4567</div>
</div>

Lastly, incorporate the following CSS code:

.phone-wrapper {
      position: absolute;
   }
    
   .number {
      z-index: 1;
      position: absolute;
   }
   .phone-wrapper:hover .cta {
      transform: translateY(-50%);
      transition: 0.8s;
   }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

If the background image on a div is not visible, then the alt text of the

Here is my unique HTML code consisting of a single div and an image positioned outside the div. <div runat="server" id="ProductThumbnail" style="width:140px;height:140px;position:relative;background-position:center;background-repeat:no-repeat;"> ...

c#htmlcssasp.netimage

Show an Angular Mat Card beneath the Input Field and position it on top of all other div elements

I am designing a signup page and I need to include a material card below the password field with checkboxes for password requirements. The challenge is that when the card appears, it pushes down all other elements such as the sign-up button. I want the ca ...

htmlcssangularangular-material

Using the combination of z-index and visibility:hidden makes the button go completely undetect

Can someone please review this code? .parent { visibility: hidden; position: relative; z-index: 1; } .child { visibility: visible; } <button class="parent"> <span class="child">content</span> </button> I' ...

cssbuttonfirefoxz-index

Adding an arrow to a Material UI popover similar to a Tooltip

Can an Arrow be added to the Popover similar to the one in the ToolTip? https://i.stack.imgur.com/syWfg.png https://i.stack.imgur.com/4vBpC.png Is it possible to include an Arrow in the design of the Popover? ...

javascriptcssreactjstypescriptmaterial-ui

Creating a disappearing carousel on mobile and tablet that disappears when extended to md size

Currently, I am developing a website that consists of a .row with 3 columns at full size, each containing a bootstrap4 card. However, when the website is viewed on tablet or mobile devices, those 3 images should transform into a carousel display. I'm ...

htmlcssbootstrap-4

hide content on both desktop and mobile devices

I can't seem to figure out what's wrong here and my mind is blank. I have 2 tables - one for desktop users and one for mobile users. I attempted to hide one using the display none property in my code. .mobile{display: none;} This CSS was mean ...

htmlcssmobile

Guide to creating a custom wrapper for a Material UI component with React JS

I am utilizing the Material UI next library for my project and currently working with the List component. Due to the beta version of the library, some parameter names are subject to change. To prevent any future issues, I have decided to create a wrapper a ...

javascriptcssreactjsmaterial-ui

Prevent parent from scrolling when hovering over a div in HTML5

Unfortunately, the scrolling attribute is not supported in HTML5. I'm facing an issue where I have an svg inside an iframe within a div, and I need to enable scroll functionality within the div while preventing the page from scrolling at the same time ...

javascriptcsshtml

Creating a unique Bootstrap 4 custom notification dialog box

I am currently working on a design using bootstrap for an Alert message card. I had initially thought of using <div class="card">, but I am unsure if that is the best approach. Here is an image of what I am trying to create: https://i.sstatic.net/u ...

htmlcsstwitter-bootstrapbootstrap-4

Populate a div with divs using automatic margins (CSS)

I know this question has probably been asked before, but I've searched high and low and can't seem to find an answer. It seems like my front-end skills are lacking when it comes to searching for solutions. Apologies in advance if this is a redun ...

csscss-floatcontainersmargin

Could you clarify that for me?

Let's take a look at the function isIsogram(str) which checks if a string is an isogram. An isogram is a word or phrase in which no letter occurs more than once. The code snippet for this function can be seen below: We are particularly interested in ...

javascripthtmlcss

Flex items are causing a new row

Is there a way to automatically create a new row for a specific group of flex children each time they appear in the following structure? <div class="container"> <div class="portrait">portrait</div> <div class=&q ...

htmlcssflexbox

What is the best way to insert space between spans in HTML when designing email templates?

I am currently designing email templates, which means I have some limitations. Although I have used align="center", I still require some spacing between the two spans. How can I achieve this? CODE: <td width="659" height="28" bgcolor="#999999" align= ...

htmlcssemailhtml-email

Styling elements with Css Flex in a single row

Hi there, I'm currently working on a project and I'm facing an issue with aligning all the items in the same row. I've attempted to use flexbox but the items end up overlapping each other and I'm unsure of how to resolve this issue. To ...

cssreactjsmaterial-uiflexbox

My form does not receive the Bootstrap classes when using the jQuery script

**Why isn't my jQuery script coloring the rows as expected when certain conditions are met (I italicized the specific part of the code)?** Here is the HTML CODE for the POLL: <form id="pollForm" class="mb-4"> <d ...

javascripthtmljquerycssbootstrap-5

Creating a geometric shape with CSS requires defining the necessary properties and dimensions to draw an

Looking to create angular corners for the menubar The inner content could consist of labels or links. ...

csscss-shapes

Issue with image slider loop functionality not functioning properly

Looking to incorporate this image slider into my website: http://codepen.io/rslglover/pen/DBvoA The slider functions properly, but it halts after completing its cycle. I'm unsure of what distinguishes the CodePen code from mine. How can I replicate t ...

htmlcss

Tips for customizing text field appearance in Safari and Chrome

I haven't had a chance to test it on IE yet. My goal is to create a unique style for the background image and text box shape, along with borders, for the search bar on my website, [dead site]. If you check it out on Firefox or Opera and see the sear ...

htmlcssformsbrowsercross-browser

Tips on moving the first item on the Bootstrap navigation bar to the left side

I have successfully implemented a Bootstrap navigation bar and created a container to display some descriptive text beneath it, as depicted in the image provided. Utilizing the most up-to-date version of Bootstrap has ensured smooth integration. https://i ...

htmlcsstwitter-bootstrapalignmentbootstrap-4

Is the scrollWidth affected by changes in the width of a div element?

One question arises: could the scrollWidth value possibly change even if the content remains constant, but the width of the div is altered (such as during a window resize event)? It seems unlikely, yet I am experiencing unexpected issues. If it should ind ...

jquerycss