如何让图标保持在背景中，并在CSS/jQuery hover/mousenter上交换文本以正确显示

Question

我已经构建了下面的CSS和jQuery，它们在hover/mousenter上显示了一些额外的信息，但是当我将鼠标悬停在其中一个div上时，我很难将兄弟上的字体awsome图标隐藏起来，并且我在mouseenter上交换图标的文本是"跳跃；并且我无法使其正确显示(即<br>非常大(

如何：

1. 让兄弟姐妹的图标留在mouseenter的后面
2. 如何将文本交换为"；归一化"；以便它将显示为它应该显示的(即<br>正常断线而不是"跳跃"(

我的代码：

$("#SystemInfodiv1").mouseenter(function() {
$("#SystemInfodiv1").removeClass("pulse red");
$("#SystemInfoText1").html("<b>Last Database Backup:</b><br>20-05-2021 01:16:24");
});
$("#SystemInfodiv1").mouseleave(function() {
$("#SystemInfoText1").html("<i class='fas fa-database'></i>");
});
$("#SystemInfodiv2").mouseenter(function() {
$("#SystemInfodiv2").even().removeClass("pulse red");
$("#SystemInfoText2").html("<b>Database Size:</b><br>3.87 GB of 6.13 GB used storage");
});
$("#SystemInfodiv2").mouseleave(function() {
$("#SystemInfoText2").html("<i class='far fa-hdd'></i>");
});
$("#SystemInfodiv3").mouseenter(function() {
$("#SystemInfodiv3").even().removeClass("pulse red");
$("#SystemInfoText3").html("<b>Last sync with AD:</b><br>21-05-2021 07:00:04");
});
$("#SystemInfodiv3").mouseleave(function() {
$("#SystemInfoText3").html("<i class='fas fa-sync-alt'></i>");
});

#SystemInfoTable {
position: absolute;
top: -10px;
right: 190px;
z-index: 10;
width: 100px;
}
.SystemInfodiv {
width: 40px;
height: 40px;
transition-property: width height;
transition-duration: 0.5s;
z-index: 10;
font-size: 10px;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
.SystemInfodiv:hover {
z-index: 100;
}
.SystemInfodiv:hover {
width: 80px;
height: 25px;
transform: scale(4);
border-radius: 5px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
cursor: pointer;
text-align: center;
}
.SystemInfoText {
position: relative;
z-index: 10;
top: 10px;
color: white;
font-size: 17px;
transition-property: all;
transition-duration: 0.5s;
}
.SystemInfoText:hover {
top: 5px;
z-index: 15;
font-size: 4px;
}
.pulse.red {
background: rgba(255, 82, 82, 1);
box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/7fa152c719.js" crossorigin="anonymous"></script>

<table id="SystemInfoTable">
<tr style="border-bottom: 0px solid #FFFFFF;">
<td valign="bottom">
<div id="SystemInfodiv1" class="SystemInfodiv bg-success"><span id="SystemInfoText1" class="SystemInfoText"><i class="fas fa-database"></i></span></div>
</td>
<td valign="bottom">
<div id="SystemInfodiv2" class="SystemInfodiv bg-warning"><span id="SystemInfoText2" class="SystemInfoText"><i class="far fa-hdd"></i></span></div>
</td>
<td valign="bottom">
<div id="SystemInfodiv3" class="SystemInfodiv bg-danger pulse red"><span id="SystemInfoText3" class="SystemInfoText"><i class="fas fa-sync-alt"></i></span></div>
</td>
</tr>
</table>

Answer 1

我建议不要使用table来实现这种简化标记的布局。

HTML

<div id="SystemInfoTable">
<div id="SystemInfodiv1" class="SystemInfodiv bg-success"><span id="SystemInfoText1" class="SystemInfoText"><i class="fas fa-database" aria-hidden="true"></i></span></div>
<div id="SystemInfodiv2" class="SystemInfodiv bg-warning"><span id="SystemInfoText2" class="SystemInfoText"><i class="far fa-hdd" aria-hidden="true"></i></span></div>
<div id="SystemInfodiv3" class="SystemInfodiv bg-danger"><span id="SystemInfoText3" class="SystemInfoText"><i class="fas fa-sync-alt" aria-hidden="true"></i></span></div>
</div>

CSS

#SystemInfoTable {
display: flex;
}

CSSposition: relative;应将当前/悬停元素保持在其他图标之上。z-index需要position工作，没有它什么也做不了。注意不要过度使用position和z-index，这样做会让你陷入很多混乱。

.SystemInfodiv {
position: relative;
}

---

您正在使用transition-property: all;，这将转换每个属性，尝试将其设置为特定属性，这样您只转换您需要的内容，这可能有助于您的跳跃悬停样式。

还可以考虑拥有一个包含所需信息的子元素，并为该元素设置样式，添加/编辑其内容，并在悬停时隐藏和显示子元素。