Question

.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;}

html只是<p>元素中的<div>元素。想要在父<p>悬停时显示<div>元素。

Answer 1

您可以根据父母的悬停条件选择它，因此

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

http://jsfiddle.net/g6ur51xj/

Answer 2

我认为这就是你的意思？

<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中显示html

这是一个有效的JSFIDDLE

Answer 3

我想这或多或少是你所追求的：

＆＃13;

div.show-content-on-hover p {
  display: none;
}
div.show-content-on-hover:hover p {
  display: block;
}

＆＃13;

<div class="show-content-on-hover">
  <h3>Hover here to see an awesome quote:</h3>
  <p>
    <q>As Gregor Samsa awoke one morning from uneasy dreams he found himself transformed in his bed into a gigantic insect.</q>
  </p>
</div>

＆＃13;

Answer 4

你想使用这样的东西：

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

您需要确保将父div设置为特定的高度和宽度，因为如果仅将内容设置为display：none，则父div将默认折叠。

另一种选择是使用：

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

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

如何使用CSS在其父</p> <div>的悬停上显示<p>元素？</div>

4 个答案: