How can I get icons to stay in background and swapped text to display correct on CSS/jQuery hover/mouseenter?

Question

I have build the below CSS and jQuery, that display some additional info on hover/mouseenter, however I have dificulties getting the font awsome icons on the siblings to hide when I hover over one of the DIV, and the text that I swap the icons with on mouseenter is "jumping" and I cannot get it to display correct (i.e. the is very large)

How can I:

Get the icons on siblings to stay in the back on mouseenter?
How do I get the text swapped to "normalize" so that it will display as it should (i.e the to break line normally and not "jumping")?

My code :

$("#SystemInfodiv1").mouseenter(function() {
  $("#SystemInfodiv1").removeClass("pulse red");
  $("#SystemInfoText1").html("Last Database Backup:
20-05-2021 01:16:24");
});
$("#SystemInfodiv1").mouseleave(function() {
  $("#SystemInfoText1").html("");
});

$("#SystemInfodiv2").mouseenter(function() {
  $("#SystemInfodiv2").even().removeClass("pulse red");
  $("#SystemInfoText2").html("Database Size:
3.87 GB of 6.13 GB used storage");
});
$("#SystemInfodiv2").mouseleave(function() {
  $("#SystemInfoText2").html("");
});

$("#SystemInfodiv3").mouseenter(function() {
  $("#SystemInfodiv3").even().removeClass("pulse red");
  $("#SystemInfoText3").html("Last sync with AD:
21-05-2021 07:00:04");
});
$("#SystemInfodiv3").mouseleave(function() {
  $("#SystemInfoText3").html("");
});

#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);
  }
}

user_2984139 · Answer

I would suggest not using a table to achieve this layout that would simplify the markup.

HTML

CSS

#SystemInfoTable {
    display: flex;
}

CSS position: relative; should keep the current/hover element over the other icons. z-index requires position to work, without it does nothing. Be careful not to over use position and z-index, it can get you into a lot of mess if you do.

.SystemInfodiv {
    position: relative;
}

You're using transition-property: all; and that will transition every property, try setting it to specific properties so you only transition what you need, this may help your jumpy hover styles.

Also consider maybe having a child element with the info you need and style that element, add/edit it's content and hide and show the child element on hover.

How can I get icons to stay in background and swapped text to display correct on CSS/jQuery hover/mouseenter?

1 Answers