如何通过悬停其他元素来使元素可见

Question

当悬停另一个元素时，我需要使用仅CSS的解决方案(NO Jquery(来显示FontAsome图标(<i class='fas fa-arrow-alt-circle-left fa-lg arrowbounce text-success hidearrowbounce'></i>(，但目前，尽管我最初试图用.hidearrowbounce隐藏它，但它的效果与加载时显示但悬停时消失的效果相反。。我如何让它在悬停时显示？

我的代码：

.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/bootstrap@4.6.0/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>

Answer 1

最初，箭头可见性设置为hidden，但将鼠标悬停在表行上，箭头可见性从hidden更改为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/bootstrap@4.6.0/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

我设法在@hussain.codes的帮助下使其工作，下面是完成的代码：

.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/bootstrap@4.6.0/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>