如何使用CSS在父元素的悬停位置显示

元素？

---

html只是元素中的一个元素。要在父对象悬停时显示元素。

您可以根据父对象的悬停条件选择它，例如

.divtwochild {
    font-size: 24pt;
    margin-left: 500px;
    margin-top: 40px;
    width: 400px;
    display: inline-block;}

.divtwochild:hover, .divtwochild {
    display: block;}

.divtwotext {
    font-size: 30pt;
    font-family: open sans;
    font-weight: bolder;
    text-align: right;
    display: none;}

---

我想这就是你的意思

.parent {
    /* Whatever */
}
.child {
    /* Whatever */
    display:none;
}
.parent:hover .child {
    /* Whatever */
    display: initial;
}

这将在子div中显示html

---

这是一份工作

我想这或多或少就是你想要的：

div.show-content-on-hover p{ 显示：无； } div.show-content-on-hover:hover p{ 显示：块； } 将鼠标悬停在此处查看精彩的引用： 一天早上，当格雷戈·萨姆萨从不安的梦中醒来时，他发现自己在床上变成了一只巨大的昆虫。

---

您希望使用类似以下内容：

<div id="parent">
    <p>Hover me</p>
    <div class="child">
        <p>u hovered over the hover me</p>
    </div>
</div>

#parent:hover > .child{
    visibility:visible;
}
.child{
    visibility:hidden;
}

您需要确保将父div设置为特定的高度和宽度，因为如果仅将其内容设置为“显示：无”，则默认情况下父div将折叠

另一种选择是使用：

.p-child {display:none;}
.parent-div {height:50px; width:300px;}
.parent-div:hover > .p-child {display:block;}

它允许字体设置父div的尺寸

.p-child {opacity:0;}
.parent-div:hover > .p-child {opacity:1;}