在父hover中显示子元素在CSS中

Question

当鼠标悬停在div中时,是否可以切换删除按钮？我记得有人告诉我,不使用JS就可以了.

HTML

<div id="something">
    <button class="hide">delete</button>
</div>

CSS

#something:hover{

}

Answer 1

如果你有这样的样式hide(页面将显示为元素在那里,但没有看到):

#something .hide{
    visibility: hidden;
}

你可以这样做,只是隐藏它:

#something:hover .hide{
    visibility: visible;
}

如果你像这样设置样式(页面将显示为元素不在那里):

#something .hide{
    display: none;
}

你可以这样做:

#something:hover .hide{
    display: block;
}

Answer 2

如果父母没有徘徊，有一种现代的、侵入性较小的方法可以隐藏孩子。

.parent:not(:hover) .child {
  display: none;
}

<div class="parent">parent 
  <span class="child">child</span>
</div>