Create a cohesive user experience by implementing the same CSS animation when hovering over two distinct elements

For a learning exercise, I attempted to create an animation. My goal was to have the circle trigger an animation when hovered over, while also revealing the text in the .hide element. However, as soon as I hover over the circle and then move my mouse onto the text, both animations stop.

Is there a way to maintain both animations even if I hover over the text within the .hide element? I've experimented with creating a separate :hover subclass for the .hide class with animations, added the animation directly to the .hide class, and tried combining the two approaches, but I haven't been successful.

Additionally, that small black line that appears at the beginning of the hover is quite bothersome. If anyone knows how to remove it, I would greatly appreciate the help.

.container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle-icon {
  background: gray;
  border-radius: 50%;
  padding: 15px;
  color: white;
  transition: padding 1s;
  margin: 0px;
}

.circle-icon:hover {
  padding: 30px;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: 2;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

.hide {
  position: relative;
  left: -15px;
  display: none;
  line-height: 40px;
  height: 40px;
  width: 100px;
  text-align: center;
  border-radius: 0 50px 50px 0;
  margin: 0px;
  vertical-align: middle;
  color: white;
  animation-name: slide;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-direction: forward;
}

.circle-icon:hover + .hide {
  display: inline-block;
  background-color: gray;
  width: 100px;
}

@keyframes spin {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}

@keyframes slide {
  0% {
    width: 0px;
    font-size: 0%;
  }
  100% {
    width: 100px;
    font-size: 100%;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home</title>
    <link rel="stylesheet" href="style.css" />
    <script
      src="https://kit.fontawesome.com/7dd2bd858f.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="container">
      <a href="#">
        <i class="fas fa-home circle-icon"></i>
        <span class="hide">HOME</span>
      </a>
    </div>
  </body>
</html>

htmlcss

Answer №1

To address the issues you're experiencing, I have provided explanations for each necessary change following the example. In essence:

The primary problem lies in the fact that you are triggering the hover effect solely on the circle-icon. This results in the hover effect ending once you move the cursor away from it, even if it's towards the associated text. To rectify this, you need to trigger the hover effect by hovering over the entire link, not just the circle.

Functional Example:

.container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle-icon {
  background: gray;
  border-radius: 50%;
  padding: 15px;
  color: white;
  transition: padding 1s;
  margin: 0px;
}

a.icontextlink { text-decoration:none;}

.icontextlink:hover .circle-icon {
  padding: 30px;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: 2;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

.hide {
  position: relative;
  left: -15px;
  display: none;
  line-height: 40px;
  height: 40px;
  width: 100px;
  text-align: center;
  border-radius: 0 50px 50px 0;
  margin: 0px;
  vertical-align: middle;
  color: white;
  animation-name: slide;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-direction: forward;
}

.icontextlink:hover .hide {
  display: inline-block;
  background-color: gray;
  width: 100px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
     transform: rotate(360deg); 
  }
}

@keyframes slide {
  0% {
    width: 0px;
    font-size: 0%;
  }
  100% {
    width: 100px;
    font-size: 100%;
  }
}
<script
      src="https://kit.fontawesome.com/7dd2bd858f.js"
      crossorigin="anonymous"
    ></script>

    <div class="container">
      <a href="#" class="icontextlink">
        <i class="fas fa-home circle-icon"></i>
        <span class="hide">HOME</span>
      </a>
    </div>

Necessary Adjustments:

1. Assign a specific class to the link to enable targeted CSS application instead of affecting all a elements within your container, like so:

<a href="#" class="icontextlink">
    <i class="fas fa-home circle-icon"></i><span class="hide">HOME</span>
</a>

2. Implement the animation on the circle upon hovering the entire link. Achieve this by changing the CSS selector from .circle-icon:hover to .icontextlink:hover .circle-icon, as shown below:

.icontextlink:hover .circle-icon { animation-name: spin; /* etc... */ }

3. Ensure the visibility of the hide class when hovering over the entire link - allowing seamless continuation of effects even while transitioning between circle and text. Modify the selector from .circle-icon:hover + .hide to .icontextlink:hover .hide:

.icontextlink:hover .hide {  display: inline-block; /* etc... */ }

4. Conceal the default blue underline during hover - eliminate the browser's default link styling using text-decoration:none;, like so:

a.icontextlink { text-decoration:none;}

5. Correct the rotation animation Though not explicitly mentioned in your query, the spin animation appears nonfunctional due to incorrect usage such as rotate: 0deg;. The proper format is transform: rotate(0deg);:

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Answer №2

Alright, here's the breakdown:

  1. To achieve the "little black line", it involves the use of the text-decorator property within the a tag.
  2. Regarding the animation issue - the challenge arises when you move your cursor away from the home button while not hovering over it. This causes the :hover effect to cease, resulting in a return to display:none. However, since the button then moves back towards the cursor, the hover effect triggers again (creating an endless loop). To address this, I adjusted the display properties so that when you hover over the text, it remains as inline-block.

.container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle-icon {
  background: gray;
  border-radius: 50%;
  padding: 15px;
  color: white;
  transition: padding 1s;
  margin: 0px;
}

.hide:hover {
  display: inline-block;
}

.hide {
  position: relative;
  left: -15px;
  display: none;
  line-height: 40px;
  height: 40px;
  width: 100px;
  text-align: center;
  border-radius: 0 50px 50px 0;
  margin: 0px;
  vertical-align: middle;
  color: white;
  background-color: gray;
  animation-name: slide;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-direction: forward;
}

.circle-icon:hover+.hide {
  display: inline-block;
}

@keyframes spin {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}

@keyframes slide {
  0% {
    width: 0px;
    font-size: 0%;
  }
  100% {
    width: 80px;
    font-size: 100%;
  }
}

a {
  text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Home</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://kit.fontawesome.com/7dd2bd858f.js" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <a href="#">
      <i class="fas fa-home circle-icon"></i>
      <span class="hide">HOME</span>
    </a>
  </div>
</body>

</html>

Answer №3

In order to eliminate the black line, I took the following action:

*{
  text-decoration: none;
}

This adjustment was implemented at the beginning of the css file.

Furthermore, I enhanced the animation for the appearance of the text:

@keyframes slide {
  0% {
    width: 0px;
    font-size: 0%;
  }

  25% {
    font-size: 0%;
  }

  27% {
    font-size: 20%;
  }

  100% {
    width: 100px;
    font-size: 100%;
  }
}

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

Unexpected results from CSS nth-child selector

Creating a dynamic table and updating its cell values accordingly while handling asynchronous returns brings about some challenges. The number of columns can vary, but the rows remain constant within this section of the table (7 rows). When trying to upda ...

jqueryhtmlcsscss-selectors

Is there a way to extract all the aria-label attributes from elements that share a common class?

I am currently working on a program that tallies the number of reactions from Facebook posts, with each reaction stored in an aria label containing detailed information. I am encountering difficulty retrieving the values of these unique aria labels due to ...

pythonhtmlselenium

The issue with adjusting the top position in jQuery

As I continued scrolling on my page, I encountered an issue with adjusting the top offset using jQuery on my element. I want the element with id goToLog to become fixed on the page after scrolling 80px. This functionality is working correctly. However, wh ...

jqueryhtmlcss

Encircling the icon with a circle

My styling skills are limited, but I'm attempting to create a marker that resembles the image linked below: https://i.stack.imgur.com/wXkaq.png. So far, I've made some changes in the code snippet provided, but I'm struggling to get it to d ...

htmlcss

"Styling with CSS: Create a sleek border-bottom and background effect

I want to add a bottom border and background color on mouse over. Almost there! In the example below, hovering over the span gives an underline. However, I need the underline to display when entering the hyperlink area. a{ text-decoration: none; paddin ...

htmlhoverborderunderline

Trouble with Bootstrap card dimensions: Height and width not functioning correctly

I specified a height and width for all card images, but the heights are inconsistent with one being too large and another too small. I want each card to have the same height and width. How can I achieve this? Here is what I tried. .card { height: 50%; ...

htmlcssbootstrap-4

The Best Practices section of the Chrome lighthouse report has identified an issue with properly defining the charset

I recently noticed an error in my VueJs SPA application when running a Chrome Lighthouse report. The error message indicated that the charset was not properly defined, even though I had added it to my index.html file. Below are screenshots of the issue: ...

htmlvue.jsutf-8character-encodinglighthouse

Tips for positioning Bootstrap form labels and input fields in alignment

Currently, I am enhancing bootstrap-4 forms that consist of multiple input fields and labels. The form is functional, but I aim to elevate its visual appeal and user-friendliness. Working Snippet <link rel="stylesheet" href="https://stackpath.bootst ...

htmlcssbootstrap-4

Issue with the Mat paginator items per page functionality not functioning properly in Angular 9

I have encountered an issue where changing the items displayed per page on a table I'm rendering from an observable is not functioning as expected. Despite trying methods such as ngAfterViewInit and calling page events, I did not see any changes. ...

htmlangulartypescriptangular9mat-pagination

Substitute HTML data attributes

Hey everyone, I'm wondering how to change a data attribute in my code. For example, I am currently using a script for a video background, but I want to replace the video with a lighter version when viewed on a mobile device. In my JavaScript file, I h ...

javascriptjquerycss

CSS:Tips for removing borders with border-radius in CSS

I have a div that has been styled with a left-hand border, and it's causing me some trouble. You can view the styling here on Jsfiddle. Is there a way to remove just the left hand side border without affecting the rest of the design or creating an un ...

htmlbordercss

Adjust the table to line up perfectly, center the content within the table cell (td), and align the

I'm currently working on aligning a table by centering the td elements and left justifying the text inside them. My initial attempt was to use flex for center alignment, which worked to some extent but I couldn't get the left alignment right. I ...

css

How can we stop every tab pane in (bootstrap five) from sharing the same scroll position? Each tab is currently synchronized with the scroll position of the others

In Bootstrap 5, the scroll position remains the same when switching between tabs in the tab pane. Whether moving from tab #1 to tab #2, both tabs are at the identical scroll position, failing to preserve each tab's specific location. <div class=&qu ...

javascripthtmljquerybootstrap-5

OpenStreetMap is failing to display the full map within the designated div

Here is the code snippet for displaying a map when clicking on a Span text, but not showing it in full: var latitude = document.querySelector('#lati').value; var longitude = document.querySelector('#longi').value; var open_address = doc ...

javascriptphphtmllaravel-blade

Showcasing extensive text in a Bootstrap pop-up message

I'm having some trouble showing a lengthy text in a twitter bootstrap tooltip. As you can observe from the image below, it's not working perfectly. Is there an easy solution to handle text that is too long for the bootstrap tooltip? EDIT (includ ...

jquerycsstwitter-bootstraptwitter-bootstrap-tooltip

Graphic background integrated into form input

Is it advisable to create colored shapes in Illustrator, export them as SVG files, and then embed input tags or textareas within these shapes to allow users to enter text? Are there alternative methods we could use for this functionality? ...

htmlcsssvg

Show the jQuery code block as HTML within a textarea

I'm in need of a way to display script reference code in a textarea for easy copying by users. <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"/> Even though I am using jQuery, all the solutions I ...

jqueryhtmlinnerhtml

Manipulating class properties in AngularJS from a controller

I won't dwell on the reason for this (it's required to override some behavior in Angular Material that is causing issues in Safari), but here is what I am attempting to accomplish: HTML: <style> .changeme{ height: 300px; } </st ...

javascriptcssangularjsangularjs-scope

Reduce the length of selection choices in the dropdown menu of WebForms

In my WebForms project, I have created a drop-down list by binding a list of data with 'Title' and 'Id' to it. Ddltitlelist.DataSource = submissionTitleList; Ddltitlelist.DataTextField = "Submission_Title"; Ddltitlelist.DataValueField ...

htmlcssasp.netdrop-down-menuwebforms

What are the steps to include an image in the body of an email when sending it through SMTP?

I'm currently working on creating an email verification module and I want to include my company logo at the beginning of the message. However, all the solutions I've come across so far only explain how to attach an image to the email. What I aim ...

htmlvb.netemailsmtpgmail