为什么display:initial无法正常工作? [英] Why is display:initial not working as expected?

问题描述

我正在隐藏一个子图像，并在有人悬停其父图像时显示它.问题是当子图像出现时，它显示在父图像的右侧.

I am hiding a child image and showing it when someone hovers a parent image. Problem is that when the child images shows up, it shows up on right-hand side of the parent image.

我期望它会出现在父图像下方，因为这是默认设置.不会将显示设置为初始"会使元素恢复为默认状态吗?

I was expecting it to appear below the parent image as that's what the default is. Doesn't setting display to "initial" makes the element get to its default state?

.child {
  display:none;
}

.parent:hover .child {
  display:initial;
}

<div class="parent">
    <img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
  <div class="child">
    <img src="http://xiostorage.com/wp-content/uploads/2015/10/test.png" width="200">
  </div>
</div>

这个问题仅是出于我对CSS属性 display:initial 的理解.我不需要在父图像的上方，下方，右侧或左侧显示子图像.

This question is just for my understanding of CSS property display:initial. I am not in need of showing the child image above, below, right or left of parent image.

推荐答案

值 initial 的含义不同，具体取决于您为其分配的属性.

The value initial means different things depending on the property you assign it to.

如果您将其分配给非继承属性(例如您的情况下的 display )，则其值将更改为已定义的 initial 值 CSS规范(不是设置为样式表中先前定义的值-这就是为什么您会得到问题中所述行为的原因: display 默认为其 initial 值，即 inline )

If you assign it to a non-inherited property, like display in your case, then its value changes to the initial value defined for that property in the CSS specification (not to a value previously defined in your stylesheet – that's why you get the behaviour described in your question: display is being defaulted to its initial value, which is inline)

如果将其分配给继承的属性(例如 color )，则该属性将采用样式表中先前定义的任何值，如果有.如果没有，它将默认返回CSS规范中定义的 initial 值.(例如 color 随浏览器的不同而不同，但通常为 black )

If you assign it to an inherited property, like color for example, then the property takes any value defined previously in your stylesheet, if there is any. If there isn't, it defaults back to the initial value defined in the CSS specification. (E.g. for color it varies from browser to browser but it's usually black)

相关链接:

初始-CSS |MDN

初始值-CSS |MDN

显示-CSS |MDN

继承-CSS |MDN

这篇关于为什么display:initial无法正常工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！