How to hide one text and display another when both are in same position for CSS-CodePudding

I'm trying to figure out how to use hover to have one text hide and another be displayed in its place when you hover over in its area. I've tried 2 different methods and these two don't seem to work:

<div id = "Area">
<span id="name">big-name-1234156</span>
<span id="name2">small-name</span>
</div>

#name {
  position: absolute;
  top: 0px;
  left: 0px;
}

#name2 {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
}

#Area:hover .name {
  opacity: 0;
}

#Area:hover .name2 {
  opacity: 1;
}

#name:hover {
  opacity: 0;
}

#name:hover #name2 {
  opacity: 1;
}

How can I hide 'name' and display 'name2' when I hover over the text when they are both in the same position? I just don't know what I am doing wrong here or how to fix it.

CodePudding user response：

Better make the container relative if it has absolute elements within. also better keep one not absolute so it will take up the space of the flow.

You may add transition for a less dramatic effect.

#Area {
  position:relative; 
}

#name {
  opacity: 1;
  transition: 0.5s;
}

#name2 {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  transition: 0.5s;
}

#Area:hover #name {
  opacity: 0;
}

#Area:hover #name2 {
  opacity: 1;
}

before
<div id="Area">
  <span id="name">big-name-1234156</span>
  <span id="name2">small-name</span>
</div>
after