CODEWITHSUNDEEP
htmlcss
Zoey Malkov
Zoey Malkov

Reputation: 832

How do I show a div when hovered on a different div

I have a profile icon. And upon hover, I want it to show the "Profile" text above the icon. I also want to ensure that when the text shows up, its above the icon, not below it. Current the text shows below the icon, how do I make the text show above the icon? I want to do this in pure CSS/HTML. I don't want to use javascript.

I also don't want any other div elements to move when the text is shown above the icon upon hover.

.hide {
  display: none;
}

.body {
    width: 400px;
    height: 100px;
    background: blue;
}

.myDIV {
height: 20px;
width: 20px;
background: url('https://i.imgur.com/gIELtaC.png');
}
    
.myDIV:hover + .hide {
  width: max-content;
  display: block;
  color: red;
  background: purple;
}
<div class="body">
    <div class="myDIV"></div>
    <div class="hide">Profile</div>

    <div class="myDIV"></div>
    <div class="hide">Another Profile</div>
</div>

Upvotes: 0

Views: 55

Answers (1)

Sibevin Wang
Sibevin Wang

Reputation: 4538

To pop up a text without changing other div positions, you need wrap it to a relatvie div and use position: absolute to define the text position. Here is an example:

.body {
    width: 400px;
    height: 100px;
    background: blue;
}

.icon {
  height: 20px;
  width: 20px;
  background: url('https://i.imgur.com/gIELtaC.png');
}
    
.text {
  display: none;
  width: max-content;
  color: red;
  background: purple;
}

.icon-with-text {
  position: relative;
}

.icon-with-text .text {
  position: absolute;
  top: 0;
  transform: translateY(-100%);
}

.icon:hover + .text {
  display: block;
}
<div class="body">
    <div class="icon-with-text">
      <div class="icon"></div>
      <div class="text">Profile</div>
    </div>
    
    <div class="icon-with-text">
      <div class="icon"></div>
      <div class="text">Another Profile</div>
    </div>
</div>

Upvotes: 1

Related Questions