CODEWITHSUNDEEP
css
Stig Kølbæk
Stig Kølbæk

Reputation: 474

How can I get make element visible by hovering other element

I need to use CSS only solution (NO Jquery) to show a FontAwsome icon (<i class='fas fa-arrow-alt-circle-left fa-lg arrowbounce text-success hidearrowbounce'></i>) when hovering another element, but at the moment, eventhough I have tried to hide it initially with .hidearrowbounce it has the opposite effect that it shows on load but dissapear on hover .. how can I make it hide initially and show 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/[email protected]/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>

Upvotes: 0

Views: 64

Answers (2)

Stig K&#248;lb&#230;k
Stig K&#248;lb&#230;k

Reputation: 474

I managed to get it working from the help by @hussain.codes, and here is the finished 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/[email protected]/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"
/>
<center>
  <table>
    <tr class="tr_user_tasks_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="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>

Upvotes: 1

Gulam Hussain
Gulam Hussain

Reputation: 1763

Initially arrow visibility is set to hidden but you hover over table row arrow visibility changes from hidden to visibile.

.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/[email protected]/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>

Upvotes: 2

Related Questions