Question

我试图配置一个非常基本的动画效果，其中使用CSS过渡将鼠标悬停在div旁边，使其从0到100％form动画放置width元素。 Here is a fiddle for reference。我遇到了两个问题：首先，在这种情况下，<p>元素和<form>元素没有垂直排列，尽管设置为display:inline-block和vertical-align:top 。其次，在将form元素加宽到100％时，它会悬停在<p>元素之下;有谁知道这里发生了什么？

＆＃13;

    #wrapper {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        text-align: left;
        vertical-align: top;
        border: 1px solid #000;
        margin: 0;
        padding: 0;
    }
    #wrapper p {
        font-size: 16px;
        display: inline-block;
        vertical-align: top;
        text-transform: uppercase;
        background-color: rgba(255, 255, 255, 0.5);
        padding: 0.5em 1em;
        cursor: pointer;
    }
    #wrapper:hover form#access {
        width: 100%;
    }
    form#access {
        display: inline-block;
        width: 0%;
        margin: 0;
        padding: 0;
        overflow:hidden;
        -webkit-transition: width 1s ease-in-out;
        -moz-transition: width 1s ease-in-out;
        -o-transition: width 1s ease-in-out;
        transition: width 1s ease-in-out;
    }
    form#access input {
        font-size: 18px;
        display: inline-block;
        vertical-align: top;
        padding: 0;
        margin: 0;
        border: none;
        max-width: 100px;
    }

＆＃13;

    <div id="wrapper">
      <p>Enter code:</p>
      <form id="access">
        <input placeholder="code" id="access-code" name="access-code" type="text" tabindex="1" required>
      </form>
    </div>

＆＃13;

Answer 1

因为您将form#access设置为需要100%的整个宽度的#wrapper container。

这应该起作用：

#wrapper:hover form#access {
    width: 100px;
}

另外，请考虑在包装器上使用display: inline-flex，这样您就不需要设置display: inline-block，并且更容易将这两个元素集中在一起。

我更新了您的fiddle here

Answer 2

您在悬停时将表单设置为100％宽度，这将占用其父级的整个宽度。您可以降低该百分比，使其适合段落的单行，或者只是将其添加到#wrapper：

    white-space: nowrap;

内联块元素在悬停效果下降？

2 个答案: