当鼠标悬停在纯 CSS 中的父 div
上时,是否可以切换 Delete 按钮?
HTML
<div id="parent">
<button class="hidden-child">delete</button>
</div>
CSS
#parent:hover{
/* Some CSS here */
}
最佳答案
如果您设置了这样的 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>
关于html - 在 CSS 中,在父元素悬停时显示子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34459841/