使侧边栏中的跨度出现在悬停时

Question

我试图让侧边栏中的菜单项不可见，并且仅当我将鼠标悬停在侧边栏上时才显示它们

.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 class="app">
<dive class="sidebar"><span>123</span></div>
</div>

Answer 1

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

Answer 2

当 .sidebar 元素被用户悬停时，您希望 visibility 属性设置为 visible，不幸的是您选择设置 display 属性到 none，还没有更新 property-value，以便显示它。

因此，要更正此问题，请在两个地方使用相同的 property，并在默认和 :hover 状态下设置 property-value。

使用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 class="app">
  <div class="sidebar"><span>123</span></div>
</div>

或者您可以使用 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 class="app">
  <div class="sidebar"><span>123</span></div>
</div>

当然还有其他选项，例如opacity，它允许在隐藏和可见状态之间进行转换：

*,
 ::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 class="app">
  <div class="sidebar"><span>123</span></div>
</div>

而且，当然，您可以添加其他属性，例如 transform，使外观更美观（对于给定的 'aesthetically pleasing' 值），例如：

*,
 ::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 class="app">
  <div class="sidebar"><span>123</span></div>
</div>

参考文献：

使侧边栏中的跨度出现在悬停时

Make Span in sidebar appear on hover

html

css