在 CSS 中，在父元素悬停时显示子元素

Question

是否可以在纯 CSS 中将鼠标悬停在父 div 上时切换 删除 按钮？

HTML

 <div id="parent">
    <button class="hidden-child">delete</button>
</div>

CSS

 #parent:hover{
    /* Some CSS here */
}

原文由 Nichole A. Miler 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您设置了 hide 的样式（页面将显示为元素存在但未显示）：

 #parent .hidden-child{
    visibility: hidden;
}

你可以这样做只是为了隐藏它：

 #parent:hover .hidden-child{
    visibility: visible;
}

并且如果您将其设置为这样（页面将显示为好像该元素不存在）：

 #parent .hidden-child{
    display: none;
}

你可以这样做：

 #parent:hover .hidden-child{
    display: block;
}

在行动！

 #parent {
    width: 10rem;
    height: 10rem;
    background-color: #ababab;
}

#parent .hidden-child{
    visibility: hidden;
}

#parent:hover .hidden-child{
    visibility: visible;
}

 <div id="parent">
    <button class="hidden-child">Delete</button>
</div>

原文由 Peyman Mohamadpour 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在不知道您如何设置控件样式的情况下，如果您使用任何与 css-js 相关的库，类“.hide”很可能在那里定义并且默认情况下将被调用，然后将隐藏您的按钮，因此您可以使用 JQuery 对其进行操作或Javascript。

但是，如果您修改了代码并且按钮的隐藏状态为显示：无；用户将留下一个空白页面，不知道要悬停什么或在哪里，所以你必须给他们一些悬停的东西：

 Sol 1:

HTML:
<div id="something">
     Hover Here
    <button class="hides">delete</button>
</div>

CSS:
#something .hides{

    display:none;
}

#something:hover .hides{

    display:inline-block;
}

如果按钮的隐藏状态是 visibility:hidden ；这将隐藏按钮，但仍会保留其在屏幕上的空间，从而留下一个尴尬的界面，除非你喜欢它的样式。

 Sol 2:

HTML:

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

CSS:
#something{

    /*My fancy style;*/
}
#something .hides{

    visibility: hidden;
}

#something:hover .hides{

        visibility: visible;
}

原文由 RickShaw 发布，翻译遵循 CC BY-SA 4.0 许可协议