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

Question

当鼠标悬停在纯 CSS 中的父 div 上时，是否可以切换 Delete 按钮？

HTML

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

CSS

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

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>