避免在悬停时扩展弹性元素并将其他元素向下推移

huangapple
go评论105阅读模式
英文:

Avoid expanding the flex element and pusing the other elements down on hover

问题

可以使hover元素不推动其他元素向下，从而扩展整个 flexbox，而是让它与其他元素重叠并用其主体隐藏它们吗？

我尝试了 z-index，但没有成功。

.flex-container {
  display: flex;
  justify-content: space-evenly;
  flex: auto;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100%;
  margin: 10px;
  line-height: 15px;
  font-size: 15px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.child {
  display: none;
  position: relative;
}

.main:hover + .child {
  display: block;
  color: red;
  background-color: yellow;
  z-index: 1;
}

<div class="flex-container">
  <div class="wrapper">
    <p class="main">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <div class="child">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
      </p>
    </div>
    <p class="main">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <div class="child">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
      </p>
    </div>
    <p class="main">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <div class="child">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
      </p>
    </div>
  </div>
  <div class="wrapper"></div>
</div>
英文:

Is it possible to make the hover element not to push the other elements down thus expanding the whole flexbox but instead have it to overlap the other elements and hide them with its body?

I tried z-index but didn't succeed.

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-css -->

.flex-container {
  display: flex;
  justify-content: space-evenly;
  flex: auto;
}

.flex-container&gt;div {
  background-color: #f1f1f1;
  width: 100%;
  margin: 10px;
  line-height: 15px;
  font-size: 15px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.child {
  display: none;
  position: relative;
}

.main:hover+.child {
  display: block;
  color: red;
  background-color: yellow;
  z-index: 1;
}

<!-- language: lang-html -->

&lt;div class=&quot;flex-container&quot;&gt;
  &lt;div class=&quot;wrapper&quot;&gt;
    &lt;p class=&quot;main&quot;&gt;
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    &lt;/p&gt;
    &lt;div class=&quot;child&quot;&gt;
      &lt;p&gt;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;p class=&quot;main&quot;&gt;
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    &lt;/p&gt;
    &lt;div class=&quot;child&quot;&gt;
      &lt;p&gt;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;p class=&quot;main&quot;&gt;
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    &lt;/p&gt;
    &lt;div class=&quot;child&quot;&gt;
      &lt;p&gt;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;wrapper&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

在您的示例中，您必须将光标悬停在 p 元素上，子元素会展开或显示，但当您释放光标离开 p 元素时，子元素会隐藏。因此，请尝试以下代码并更改一些代码结构以满足您的要求。

.flex-container {
    display: flex;
    justify-content: space-evenly;
    flex: auto;
}

.flex-container>div {
    background-color: #f1f1f1;
    width: 100%;
    margin: 10px;
    line-height: 15px;
    font-size: 15px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.child {
    display: none;
    position: relative;
}

.main {
    padding: 10px;
}

.main p {
    margin: 0;
}

.main:hover>.child {
    display: block;
    color: red;
    background-color: yellow;
    z-index: 1;
    margin-top: 10px;
}

<div class="flex-container">
    <div class="wrapper">
        <div class="main">
            <p class="main-test">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <div class="child">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
                </p>
            </div>
        </div>
        <div class="main">
            <p class="main-test">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <div class="child">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
                </p>
            </div>
        </div>
        <div class="main">
            <p class="main-test">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <div class="child">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
                </p>
            </div>
        </div>
    </div>
    <div class="wrapper">
    </div>
</div>
英文:

In your example, you must hover over the p element, and the child element expands or shows, but when you release your cursor from the p element, the child element hides, so try the below code and change some code structure to fulfill your requirement.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.flex-container {
        display: flex;
        justify-content: space-evenly;
        flex: auto;
    }

    .flex-container&gt;div {
        background-color: #f1f1f1;
        width: 100%;
        margin: 10px;
        line-height: 15px;
        font-size: 15px;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }

    .child {
        display: none;
        position: relative;
    }

    .main {
        padding: 10px;
    }

    .main p {
        margin: 0;
    }

    .main:hover&gt;.child {
        display: block;
        color: red;
        background-color: yellow;
        z-index: 1;
        margin-top: 10px;
    }

<!-- language: lang-html -->

&lt;div class=&quot;flex-container&quot;&gt;
        &lt;div class=&quot;wrapper&quot;&gt;
            &lt;div class=&quot;main&quot;&gt;
                &lt;p class=&quot;main-test&quot;&gt;
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                &lt;/p&gt;
                &lt;div class=&quot;child&quot;&gt;
                    &lt;p&gt;
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
                    &lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;main&quot;&gt;
                &lt;p class=&quot;main-test&quot;&gt;
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                &lt;/p&gt;
                &lt;div class=&quot;child&quot;&gt;
                    &lt;p&gt;
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
                    &lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;main&quot;&gt;
                &lt;p class=&quot;main-test&quot;&gt;
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                &lt;/p&gt;
                &lt;div class=&quot;child&quot;&gt;
                    &lt;p&gt;
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
                    &lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;wrapper&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月5日 13:37:50
  • 转载请务必保留本文链接：https://go.coder-hub.com/76403720.html
  • css
  • flexbox
  • hover
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定