What is the best way to show an element when hovering over another element?

I'm looking for a CSS-only solution (NO JQuery) to display a FontAwsome icon (

<i class='fas fa-arrow-alt-circle-left fa-lg arrowbounce text-success hidearrowbounce'></i>
) only when hovering over another element. However, despite attempting to initially hide it with .hidearrowbounce, it seems to have the opposite effect - showing on load but disappearing on hover. How can I make it hidden initially and then show up when hovering over?

My Code:

.hidearrowbounce {
  display: none;
}

.tr_user_done:hover {
  background: #e9ecef;
  cursor: pointer;
}

.tr_user_done:hover .TextSpanDone:hover {
  color: #28a745;
}

.tr_user_done:hover .TextSpanDone:hover {
  visibility: hidden;
  position: relative;
}

.tr_user_done:hover .TextSpanDone:hover:after + .hidearrowbounce {
  visibility: visible;
  position: absolute;
  width: 100%;
  !important;
  top: 0;
  left: 0;
  content: attr(data-hover);
  color: #28a745;
  vertical-align: top;
}

.arrowbounce {
  position: absolute;
  width: 50px;
  right: 10px;
  margin: 5px;
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-15px);
  }
}

@-webkit-keyframes bounce {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-15px);
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15777a7a61666167746555213b233b25">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<table>
  <tr class="tr_user_done hand_user_tasks" onclick="window.location='#';">
    <td align="center" style="width: 30px;"><i class="fas fa-check text-success"></i></td>
    <td>
      <div class="TextSpanDone" data-hover="TEXT ON HOVER" style="width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
        <font style="font-size: 13px;"><b>Initial text</b><i class='fas fa-arrow-alt-circle-left fa-lg arrowbounce text-success hidearrowbounce'></i>
          <DIV>
    </td>
  </tr>
</table>

css

Answer №1

At first, the arrow is hidden but when you hover over the table row, the arrow becomes visible.

.arrowbounce{
  visibility: hidden;
}

.tr_user_done:hover {
  background: #e9ecef;
  cursor: pointer;
}

.tr_user_done:hover .arrowbounce,
.TextSpanDone:hover .arrowbounce
{
  visibility: visible;
}

.tr_user_done:hover .TextSpanDone:hover {
  color: #28a745;
}




.arrowbounce {
  position: absolute;
  width: 50px;
  right: 10px;
  margin: 5px;
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}
.tr_user_done:hover .TextSpanDone:hover:after + .hidearrowbounce {
   visibility: visible;
   position: absolute;
   width: 100% !important;
   top: 0;
   left: 0;
   content: attr(data-hover);
  color: #28a745;
  vertical-align: top;
}

@keyframes bounce {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-15px);
  }
}

@-webkit-keyframes bounce {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-15px);
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0f02020b0c0f096a6b7b2f051d051b">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<table>
  <tr class="tr_user_done hand_user_tasks" onclick="window.location='#';">
    <td align="center" style="width: 30px;"><i class="fas fa-check text-success"></i></td>
    <td>
      <div class="TextSpanDone" data-hover="TEXT ON HOVER" style="width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
        <font style="font-size: 13px;"><b>Initial text</b><i class='fas fa-arrow-alt-circle-left fa-lg arrowbounce text-success '></i>
          <DIV>
    </td>
  </tr>
</table>

Answer №2

Thanks to the guidance provided by @hussain.codes, I was able to successfully implement the solution. Below is the finalized code:

.arrowbounce {
  visibility: hidden;
}

.tr_user_tasks_done:hover .TaskTextSpanITDone:hover {
  color: #28a745;
}

.tr_user_tasks_done:hover .TaskTextSpanITDone:hover {
  visibility: hidden;
  position: relative;
}

.tr_user_tasks_done:hover .TaskTextSpanITDone:hover:after {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  content: attr(data-hover);
  color: #28a745;
  vertical-align: top;
}

.tr_user_tasks_done:hover {
  background: #e9ecef;
  cursor: pointer;
}

.tr_user_tasks_done:hover .arrowbounce,
.tr_user_tasks_done:hover .arrowbounce {
  visibility: visible;
  position: absolute;
  width: 100%;
  !important;
  top: 0;
  left: 0;
  content: attr(data-hover);
  color: #28a745;
  vertical-align: top;
}

.arrowbounce {
  position: absolute;
  width: 50px;
  right: 10px;
  margin: 4px;
  right: 10px;
  text-align: right;
  vertical-align: middle animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-15px);
  }
}

@-webkit-keyframes bounce {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-15px);
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c3ceced5d2d5d3c0d1fe979f91">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0PRgT/WfhxM/6OnqFcO63iEhoRlfEmtAGmd" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92BIsZ+ywDWZCek2WEVzUHkKWI593DslrnFncuktMcurfkewyop==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<center>
  <table>
    <tr class="task_done hand_task" onclick="window.location='#">
      <td align="center" style="width: 30px;"><i class="fas fa-check text-success"></i></td>
      <td>
        <div class="TaskTextSpanITDone" data-hover="Hover text" style="width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
          <font style="font-size: 13px;"><b>Initial text</b></font>
          <i class='fas fa-arrow-alt-circle-left fa-lg arrowbounce text-success'></i>
          <DIV>
      </td>
    </tr>
  </table>
</center>

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

The Media Queries in the Wordpress html5blank theme are failing to function properly

While using the html5blank theme to develop a WordPress site, I noticed that my media queries are functioning properly locally. However, when I add them to the WordPress style.css file, they seem to stop working. Even after stripping away all other media q ...

phphtmlcsswordpress

Updating the hyperlink of an html element using css

I am looking to update this A tag <a href="contact.html" >Contact</a> to <a href="tel:+13174562564" >Contact</a> using only CSS, if possible. Alternatively, like this <a href="tel:+13174562564" >+13174562564</a> ...

htmlcsshref

What could be causing this Bootstrap column to misbehave?

Why is the content stacking within each list item instead of being on the same line? I've attempted using floating and adjusting the position, but nothing seems to be working. How can I resolve this issue? .icon-left{ float:left; padding: 1 ...

csstwitter-bootstrap

I would like to apply my CSS styles to all the hyperlinks on my website

This is the CSS code I created: img{width:85%; height:auto;} #thumbwrap { position:relative; } .thumb img { border:1px solid #000; margin:3px; float:left; } .thumb span { position:absolute; visibility:hidden; } .thumb:hover, .thu ...

htmlcss

access pictures from a different directory using JavaScript

I am working with an images array that contains three jpg files. I am trying to set the background image of a class called pic using images from the array. The issue I'm facing is that the images are stored in an images folder with the URL images/. I ...

javascripthtmlcss

Creating a design that resembles boxes for the div elements while ensuring the grid layout remains undisturbed

Hey there! I'm new to using Bootstrap and I'm trying to create boxes that look like the ones on the right side of this page: Unfortunately, I haven't had much luck so far. I tried using padding, but it messed up my grid system. I assigned a ...

htmlcsstwitter-bootstrap

The product has been taken out of the cart, yet it has not been reinserted into the cart

The product disappears from the cart after clicking on Add to Cart, but it doesn't reappear when clicked again. //function for adding only one item to cart document.getElementById('btn1').onclick = function() { addItemToCart() }; fun ...

javascripthtmlcss

Troubleshooting issue arising from transferring code from CodePen to a text editor

I've attempted to recreate a Codepen example in my HTML files on my computer, but it's not displaying correctly. While the static layout resembles what appears in Codepen, the background with the moving squares isn't functioning as expected ...

htmlcss

"Dilemma with Displaying a 3-Digit Number in DaisyUI Using Next.Js Countdown Component

Hey there, I'm encountering an issue with the countdown component on my Next.js website using daisyUI. When the number of days exceeds 99, it's not rendering correctly as shown below: https://i.sstatic.net/cWR2tSEg.png https://i.sstatic.net/V0Iv ...

javascriptcssnext.jsdaisyui

Guidelines for implementing a seamless translation effect with CSS3

CSS: .horizon { position: absolute; top: 380px; width: 1800px; height: 50px; background: url(images/road.png) repeat-x; -webkit-animation-name: prop-600; -webkit-animation-duration: 20s; -webkit-animation-iteration-count: i ...

javascripthtmlcss

Utilize Flexbox to position a group of items in the center of the page, while placing a single item at the bottom for added emphasis

I have utilized Bootstrap 4 along with some custom CSS to create a hero section where all items are centered both horizontally and vertically. The only exception is one item that I want to align at the bottom of the page while still keeping it centered ho ...

cssflexboxbootstrap-4

Semantic UI dropdown field not displaying selected option text

I've encountered an issue while working with React Semantic UI. I'm trying to render a dropdown and have configured it so that the selected option's text should display in the field. However, when I choose an option from the dropdown, instea ...

javascripthtmlcssreactjstsx

Steps to fully eliminate the recent action panel from Django's administrative user interface

Is there a way to completely remove the recent action panel from Django admin UI? I have searched extensively but all the information I find is about clearing the data in the panel from the database. What I'm looking for is a way to entirely eliminate ...

pythonhtmlcssdjango

What is the best way to implement grid-gap in the display:grid property?

I've added grid-gap to both classes, but the gap area is showing up in a different color than white. Additionally, the text is aligned at the top of each cell. How can I fix this? 1) Even though I applied grid-gap to both classes, the gap area is vi ...

htmlcss

What is the best way to center this image horizontally within its variable-sized parent container?

I am currently working on a webpage that has a responsive design. The page features a list of products, with the product listing adjusting in size as the page width changes. My goal is to center the product image within its container, ensuring that the i ...

htmlcssresponsive-design

Nginx try_files not functioning properly for serving css and images

I am attempting to route any requests that come from https://example.com/user/whatever to my "Get Our App" page located at https://example.com/get_app.html Within my nginx.conf file, I have configured the following block: #Redirecting all requests under ...

htmlcssnginxconfiguration

Header misalignment occurs when the user scrolls up too quickly causing it to display

One interesting feature on my website is that the header disappears as users scroll down the page, but reappears when they start scrolling back up, even if they are halfway down. However, if a user quickly scrolls up and down, there seems to be an issue wi ...

javascriptjqueryhtmlcss

Identify the font style of the text box and ensure that the contenteditable feature matches the appearance of the

I'm struggling to style a contenteditable element to resemble a regular textbox on my website. Can anyone help me identify the font used in this picture? I've tried several but none seem to match perfectly. https://i.sstatic.net/2aAbb.jpg The co ...

htmlcssstylesheetcontenteditable

Embedding an iframe with vertical scrolling enabled

Could you explain why I am unable to scroll the full width of the website? Here is a link: http://codepen.io/anon/pen/EKPaao?editors=1100. Also, what do you think about using this solution for adjusting iframes on different screen sizes? My iframe seems to ...

htmlcssiframe

What's the best way to center align my tag vertically in this scenario?

I am struggling to center my text vertically in this scenario. Here is the structure I have: <section id='container'> <div id='title'> <h1>Title here.</h1> </div> </section> This ...

htmlcss