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

我已经构建了下面的CSS和jQuery，它们在hover/mouseenter上显示了一些额外的信息，但是当我将鼠标悬停在一个DIV上时，我很难让字体和兄弟节点上的一些图标隐藏起来，而我在mouseenter上交换图标的文本是“跳跃”的，我无法让它正确显示（即

非常大）

我怎样才能：

让兄弟姐妹的图标留在鼠标背面

如何将文本交换为“正常化”，以便按其应有的方式显示（即

正常断行而不是“跳跃”）

我的代码：

$（“#SystemInfodiv1”）.mouseenter（函数（）{
$（“#SystemInfodiv1”）.removeClass（“红色脉冲”）；
$（“#SystemInfoText1”）.html（“上次数据库备份：
20-05-2021 01:16:24”）；
});
$（“#SystemInfodiv1”）.mouseleave（函数（）{
$（“#SystemInfoText1”）.html（“”）；
});
$（“#SystemInfodiv2”）.mouseenter（函数（）{
$（“#SystemInfodiv2”）.偶（）.removeClass（“脉冲红色”）；
$（“#SystemInfoText2”）.html（“数据库大小：
3.87 GB的6.13 GB已用存储”）；
});
$（“#SystemInfodiv2”）.mouseleave（函数（）{
$（“#SystemInfoText2”）.html（“”）；
});
$（“#SystemInfodiv3”）.mouseenter（函数（）{
$（“#SystemInfodiv3”）.偶（）.removeClass（“脉冲红色”）；
$（“#SystemInfoText3”）.html（“上次与广告同步：
21-05-2021 07:00:04”）；
});
$（“#SystemInfodiv3”）.mouseleave（函数（）{
$（“#SystemInfoText3”）.html（“”）；
})；

#系统信息表{
位置：绝对位置；
顶部：-10px；
右：190px；
z指数：10；
宽度：100px；
}
.SystemInfodiv{
宽度：40px；
高度：40px；
过渡特性：宽度高度；
过渡时间：0.5s；
z指数：10；
字体大小：10px；
边界半径：20px；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
文本对齐：居中；
}
.SystemInfodiv:悬停{
z指数：100；
}
.SystemInfodiv:悬停{
宽度：80px；
高度：25px；
变换：尺度（4）；
边界半径：5px；
盒影：02px4px0rgba（0,0,0,0.2），06px20px0rgba（0,0,0,0.19）；
光标：指针；
文本对齐：居中；
}
.SystemInfoText{
位置：相对位置；
z指数：10；
顶部：10px；
颜色：白色；
字号：17px；
过渡性质：全部；
过渡时间：0.5s；
}
.SystemInfoText:悬停{
顶部：5px；
z指数：15；
字号：4px；
}
.脉搏，红色{
背景：rgba（255,82,82,1）；
盒影：0 rgba（255,82,82,1）；
动画：脉冲红2s无限；
}
@关键帧脉冲红色{
0% {
变换：比例（0.95）；
盒影：0 rgba（255,82,82,0.7）；
}
70% {
变换：比例（1）；
盒影：0 10像素rgba（255,82,82,0）；
}
100% {
变换：比例（0.95）；
盒影：0 rgba（255,82,82,0）；
}
}

---

我建议不要使用

表来实现简化标记的布局

HTML

CSS
position:relative；
应将当前/悬停元素保留在其他图标上。
z-index
需要
position
才能工作，如果不这样做，它将一事无成。小心不要过度使用
position
和
z-index
，否则会让你陷入一片混乱

.SystemInfodiv {
    position: relative;
}


您使用的是
transition property:all；
这将转换每个属性，请尝试将其设置为特定属性，以便只转换您需要的属性，这可能有助于您的跳跃悬停样式

也可以考虑让一个子元素与你需要的信息和样式元素相结合，添加/编辑它的内容并隐藏并显示悬停中的子元素。
从表到div的改变，第一个问题用图标固定；我已删除
转换属性：all
并尝试更改属性，但这没有帮助。。我想我会按照你的建议尝试隐藏/显示子元素，这听起来是一个很好的方法。。当我尝试了这个解决方案后，我会回来的：-）嗨@dylanjameswagner。。我曾尝试在jQuery中创建一个动画在两个DIV之间交换，但它没有给我我想要的结果，我只能用fadeIn/fadeOut制作，它没有给我所需的效果，我也无法找到关于如何在两个DIV之间制作动画的示例或文档。。你有没有举个例子？：-）@StigKølbæk我不明白你想要什么，“在两个div之间交换”，我想知道你是否可以用CSS而不是JS来隐藏/显示。从那里你可以使用CSS转换等。我完全理解为什么，你没有，因为我完全误解了你的意思。。但是我现在已经修好了，它正在工作：-）。。只剩下一个问题了，但我将在另一个问题中发布：-）。。你可以在这里看到结果（问题是mouseleave也设置了一个mouseenter，我不明白为什么会这样）。。
#SystemInfoTable {
    display: flex;
}

.SystemInfodiv {
    position: relative;
}