Html 在 CSS 中的父悬停上显示子元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34459841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show child element on parent hover in CSS
提问by Nichole A. Miler
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.
鼠标悬停在div中时是否可以切换删除按钮？我记得有人向我展示了不使用 JS 也是可能的。
HTML
HTML
<div id="something">
<button class="hide">delete</button>
</div>
CSS
CSS
#something:hover{
}
回答by Pmpr
if you have styled hidelike this (the page will be displayed as if the element is there but not seen):
如果你有这样的样式hide（页面将显示为好像元素在那里但没有看到）：
#something .hide{
visibility: hidden;
}
you may do it like this to just hide it:
你可以这样做来隐藏它：
#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;
}
you may do it like this:
你可以这样做：
#something:hover .hide{
display: block;
}
回答by RickShaw
Without knowing how you've styled your controls,if you are using any css-js related libraries, the class ".hide" is most likely defined there and will be called by default which will then hide your button thus you manipulate it using JQuery or Javascript.
在不知道如何设置控件样式的情况下，如果您使用任何与 css-js 相关的库，类“.hide”很可能在那里定义，默认情况下将被调用，然后将隐藏您的按钮，因此您可以使用 JQuery 操作它或 Javascript。
However, if you have vanillarised your code and the hidden state of your button is display:none; users will be left with a blank page not knowing what or where to hover so you must give them something to hover on:
但是，如果您已经修改了代码并且按钮的隐藏状态为 display:none; 用户将看到一个空白页面，不知道悬停什么或悬停在何处，因此您必须给他们一些悬停内容：
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;
}
If the hidden state of your button is visibility:hidden;this will hide the button but will still reserve its space on the screen thus leaving an awkward interface unless you make it fancy with styling.
如果你的按钮的隐藏状态是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;
}
回答by william.eyidi
There are two states in your situation, the first one is when the mouse hoverthe element the second is when it doesn't as a result leave
您的情况有两种状态，第一种是当鼠标移动hover元素时，第二种是当它没有时leave
here you have to target the element .hidewhen the pointer is on div then then disable any click event that may occur.
在这里，您必须.hide在指针位于 div 上时定位元素，然后禁用可能发生的任何单击事件。
code snippet:
代码片段：
div#something:hover .hide{
pointer-events: none;
color: GrayText;
background-color: #ddd;
background: #ddd;
}
working example :
工作示例：
cheers
干杯
回答by mohan mu
// hide element initially
#something > .hide {
display: none;
}
// display element on hover
#something:hover {
.hide {
display: inline;
}
}
