在CSS中的父悬停上显示子元素 [英] Show child element on parent hover in CSS

问题描述

当鼠标悬停在div上时，是否可以切换删除按钮?我记得有人向我展示了不使用JS的可能性.

Is it possible to toggle the delete button when mouse hover into the div? I recall someone showed me it's possible without using JS.

HTML

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

CSS

#something:hover{

}

推荐答案

如果您已设置hide的样式(页面将显示为好像元素在其中但未显示):

if you have styled hide like this (the page will be displayed as if the element is there but not seen):

#something .hide{
    visibility: hidden;
}

您可以这样隐藏它:

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

，如果您已将其设置为这种样式(页面将显示为元素不存在的状态):

and if you have styled it like this (the page will be displayed as if the element is not there):

#something .hide{
    display: none;
}

您可以这样做:

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

这篇关于在CSS中的父悬停上显示子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！