Make Span in sidebar appear on hover-CodePudding

I am trying to have the menu items in my sidebar invisible and make them visible only when i hover over the sidebar

.app{
  height: 100vh;
  width: 100vw;
}
.sidebar {
  width: 100px;
  height: 100%;
  background-color: #060606;
  transition: all 1s;
  color: #9ca3af;
  display:block;
}

.sidebar span{
display:none;
}

/* is this part even a thing */
.sidebar:hover span{
visibility:visible;
}

<div >
<dive ><span>123</span></div>
</div>

CodePudding user response：

You have to change .sidebar span to display: none;visibilty: hidden; and when hover - visbility: visible; and display: block;

CodePudding user response：

You want the visibility property set to visible when the .sidebar element(s) are hovered by the user, unfortunately you chose to set the display property to none, and haven't updated that property-value, in order to allow it to be shown.

So, to correct the problem, use the same property in both places, and set the property-value in the default and :hover states.

To use visibility:

*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.app {
  height: 100vh;
  width: 100vw;
}

.sidebar {
  width: 100px;
  height: 100%;
  background-color: #060606;
  transition: all 1s;
  color: #9ca3af;
  display: block;
}

.sidebar span {
  visibility: hidden;
}

.sidebar:hover span {
  visibility: visible;
}

<div >
  <div ><span>123</span></div>
</div>

Or you could use display:

*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.app {
  height: 100vh;
  width: 100vw;
}

.sidebar {
  width: 100px;
  height: 100%;
  background-color: #060606;
  transition: all 1s;
  color: #9ca3af;
  display: block;
}

.sidebar span {
  display: none;
}

.sidebar:hover span {
  display: initial;
}

<div >
  <div ><span>123</span></div>
</div>

There are of course other options, such as opacity, which allows for a transition between the hidden and visible states:

*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.app {
  height: 100vh;
  width: 100vw;
}

.sidebar {
  width: 100px;
  height: 100%;
  background-color: #060606;
  transition: all 1s;
  color: #9ca3af;
  display: block;
}

.sidebar span {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.sidebar:hover span {
  opacity: 1;
}

<div >
  <div ><span>123</span></div>
</div>

And, of course, you can add additional properties such as transform to make the appearance more aesthetically pleasing (for a given value of 'aesthetically pleasing'), for example:

*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.app {
  height: 100vh;
  width: 100vw;
}

.sidebar {
  width: 100px;
  height: 100%;
  background-color: #060606;
  transition: all 1s;
  color: #9ca3af;
  display: block;
}

.sidebar span {
  display: inline-block;
  opacity: 0;
  transform: scale(0.4) rotateZ(-75deg);
  transition-property: opacity, transform;
  transition-duration: 0.4s;
  transition-timing-function: ease-in;
}

.sidebar:hover span {
  opacity: 1;
  transform: scale(1) rotateZ(0deg);
}

<div >
  <div ><span>123</span></div>
</div>

References: