在CSS中，当鼠标悬停在父元素上时显示子元素

Question

这是一个翻译网页上的HTML代码，需要翻译成中文：

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

HTML

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

CSS (层叠样式表)

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

- Nichole A. Miler

---

@Nichole，请检查我的答案，它应该可以解决你的问题。 - william.eyidi

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

---

谢谢，这帮了我好几次 :) - Roelant

我见过一些奇怪的方法，但没有一个能够运行。这个方法简单、简洁，更重要的是，它能够正常工作。再也不能要求更多了，谢谢。 - CodingInTheUK

非常好的答案。 如果您的父规则是类选择器，该解决方案也可以正常工作。在您的父级中没有必要有一个id。 - Alex

Answer 2

如果你使用了任何CSS-JS相关的库，那么在不知道你如何样式化控件的情况下，“.hide”类很可能是在那里定义的，并且将被默认调用，这样会隐藏你的按钮，因此你可以使用JQuery或Javascript来操作它。

但是，如果你已经使用了原生代码，并且按钮的隐藏状态为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;
}

如果按钮的隐藏状态是 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

Answer 3

有一种现代化、非侵入性的方法，可以在父元素没有悬停时隐藏子元素。

.parent:not(:hover) .child {
  display: none;
}

<div class="parent">parent 
  <span class="child">child</span>
</div>

- Daniel Mittereder

---

这应该是被接受的答案，它比被接受的答案更直接明了。 - undefined

Answer 4

在您的情况下有两种状态，第一种是当鼠标“悬停”在元素上时，第二种是当鼠标离开元素时。

在这里，当指针位于 div 上时，您必须针对元素 .hide 进行操作，然后禁用可能发生的任何单击事件。

代码片段：

div#something:hover .hide{

   pointer-events: none;
   color: GrayText;
   background-color: #ddd;
   background: #ddd;
}

工作示例：

jsfiddle

祝好

- william.eyidi

---

它允许您管理游标在元素上的行为，与事件（点击、选择等）相关。 - william.eyidi

Answer 5

初始隐藏元素

#something > .hide {
  display: none;
}

鼠标悬停时显示元素

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

- mohan mu

---

你好，欢迎来到S/O并感谢您的积极贡献！请考虑扩展您的答案。提供答案周围的上下文很有帮助，而不仅仅是代码。阅读《如何撰写优秀答案》(https://stackoverflow.com/help/how-to-answer)将会受益匪浅！ - CmdrSharp

你的回答不包含有效的css语法。 - Kyan