使文本出现在悬停时（并将图标推出）

Question

我有一些 cards 隐藏文本，我正试图让这些文本在悬停时显示。

我想要达到的效果是 .ctaCard__footer--hidden 的 width 在 hover 上缓慢增长，这很好地将图标向右推（当退出悬停状态）。

我已经尝试设置 width: 0，但我遇到的问题是 ctaCard 在悬停时视觉上变大了，因为文本分两行（因为 width 是基于过渡）。所以我然后尝试了一种面向 display 的方法，这种方法并不流畅（无法使动画工作）。

这是我的：

:root {
  --white: #FFFFFF;
  --black-2: #2C3645;
}

.ctaCards {
  background-color: #E7E6E0;
  padding: 100px 0;
}

.ctaCards .ctaCard {
  border-radius: 10px;
  box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.08);
  padding: 44px 43px 54px 43px;
  max-width: 340px;
  margin: 0 auto 60px auto;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.ctaCards .ctaCard:hover .ctaCard__footer svg path {
  fill: var(--black-2);
}

.ctaCards .ctaCard:hover .ctaCard__footer-text {
  width: auto;
}

.ctaCards .ctaCard:hover .ctaCard__footer--hidden {
  width: auto;
  display: block;
}

.ctaCards .ctaCard__header {
  margin-bottom: 25px;
}

.ctaCards .ctaCard__body {
  flex: 1;
}

.ctaCards .ctaCard__footer {
  margin-top: 30px;
}

.ctaCards .ctaCard__footer-text {
  margin-right: 20px;
  width: 0;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.ctaCards .ctaCard__footer--hidden {
  width: 0;
  display: none;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.ctaCards .ctaCard__footer--visible {
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.background--white {
  background-color: var(--white);
}

.flex-align {
  display: flex;
  align-items: center;
  justify-content: center;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<section class="ctaCards">
  <div class="container">
    <div class="row">

      <div class="col-12 col-md-4">
        <figure class="ctaCard background--white text-center position-relative">

          <div class="ctaCard__body">
            <span class="ctaCard__body-subheader">Subheader</span>
          </div>

          <div class="ctaCard__footer flex-align position-relative">
            <div class="ctaCard__footer--hidden">
              <span class="ctaCard__footer-text">Learn more</span>
            </div>
            <div class="ctaCard__footer--visible">
              <svg id="Group_397" data-name="Group 397" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
                <g id="Icon_ionic-ios-arrow-dropright" data-name="Icon ionic-ios-arrow-dropright">
                  <path id="Path_14" data-name="Path 14" d="M14.665,10.244a.823.823,0,0,1,1.2,0l4.2,4.44a.929.929,0,0,1,.026,1.234l-4.14,4.376a.82.82,0,0,1-1.2,0,.929.929,0,0,1,0-1.267l3.519-3.763-3.607-3.763A.919.919,0,0,1,14.665,10.244Z" transform="translate(-4.866 -2.77)" fill="#089f84" />
                  <path id="Path_15" data-name="Path 15" d="M3.375,15.875a12.5,12.5,0,1,0,12.5-12.5A12.5,12.5,0,0,0,3.375,15.875Zm1.923,0A10.573,10.573,0,0,1,23.351,8.4,10.573,10.573,0,1,1,8.4,23.351,10.486,10.486,0,0,1,5.3,15.875Z" transform="translate(-3.375 -3.375)" fill="#089f84" />
                </g>
              </svg>
            </div>
          </div>

        </figure>
      </div>

      <div class="col-12 col-md-4">
        <figure class="ctaCard background--white text-center position-relative">

          <div class="ctaCard__body">
            <span class="ctaCard__body-subheader">Subheader 2</span>
          </div>

          <div class="ctaCard__footer flex-align position-relative">
            <div class="ctaCard__footer--hidden">
              <span class="ctaCard__footer-text">Learn more</span>
            </div>
            <div class="ctaCard__footer--visible">
              <svg id="Group_397" data-name="Group 397" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
                <g id="Icon_ionic-ios-arrow-dropright" data-name="Icon ionic-ios-arrow-dropright">
                  <path id="Path_14" data-name="Path 14" d="M14.665,10.244a.823.823,0,0,1,1.2,0l4.2,4.44a.929.929,0,0,1,.026,1.234l-4.14,4.376a.82.82,0,0,1-1.2,0,.929.929,0,0,1,0-1.267l3.519-3.763-3.607-3.763A.919.919,0,0,1,14.665,10.244Z" transform="translate(-4.866 -2.77)" fill="#089f84" />
                  <path id="Path_15" data-name="Path 15" d="M3.375,15.875a12.5,12.5,0,1,0,12.5-12.5A12.5,12.5,0,0,0,3.375,15.875Zm1.923,0A10.573,10.573,0,0,1,23.351,8.4,10.573,10.573,0,1,1,8.4,23.351,10.486,10.486,0,0,1,5.3,15.875Z" transform="translate(-3.375 -3.375)" fill="#089f84" />
                </g>
              </svg>
            </div>
          </div>

        </figure>
      </div>

    </div>
  </div>
</section>

Answer 1

如果您将 white-space: nowrap 添加到您的页脚文本，您就可以设置宽度和边距的动画：

:root {
  --white: #FFFFFF;
  --black-2: #2C3645;
}

.ctaCards {
  background-color: #E7E6E0;
  padding: 100px 0;
}

.ctaCards .ctaCard {
  border-radius: 10px;
  box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.08);
  padding: 44px 43px 54px 43px;
  max-width: 340px;
  margin: 0 auto 60px auto;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.ctaCards .ctaCard:hover .ctaCard__footer svg path {
  fill: var(--black-2);
}

.ctaCards .ctaCard:hover .ctaCard__footer-text {
  width: 5em;
  margin-right: 20px;
}

.ctaCards .ctaCard:hover .ctaCard__footer--hidden {
  width: auto;
  display: block;
}

.ctaCards .ctaCard__header {
  margin-bottom: 25px;
}

.ctaCards .ctaCard__body {
  flex: 1;
}

.ctaCards .ctaCard__footer {
  margin-top: 30px;
}

.ctaCards .ctaCard__footer-text {
  display: inline-block;
  white-space: nowrap;
  margin-right: 0;
  width: 0;
  overflow: hidden;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.ctaCards .ctaCard__footer--hidden {
  position: relative;
}

.background--white {
  background-color: var(--white);
}

.flex-align {
  display: flex;
  align-items: center;
  justify-content: center;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<section class="ctaCards">
  <div class="container">
    <div class="row">

      <div class="col-12 col-md-4">
        <figure class="ctaCard background--white text-center position-relative">

          <div class="ctaCard__body">
            <span class="ctaCard__body-subheader">Subheader</span>
          </div>

          <div class="ctaCard__footer flex-align position-relative">
            <div class="ctaCard__footer--hidden">
              <span class="ctaCard__footer-text">Learn more</span>
            </div>
            <div class="ctaCard__footer--visible">
              <svg id="Group_397" data-name="Group 397" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
                <g id="Icon_ionic-ios-arrow-dropright" data-name="Icon ionic-ios-arrow-dropright">
                  <path id="Path_14" data-name="Path 14" d="M14.665,10.244a.823.823,0,0,1,1.2,0l4.2,4.44a.929.929,0,0,1,.026,1.234l-4.14,4.376a.82.82,0,0,1-1.2,0,.929.929,0,0,1,0-1.267l3.519-3.763-3.607-3.763A.919.919,0,0,1,14.665,10.244Z" transform="translate(-4.866 -2.77)" fill="#089f84" />
                  <path id="Path_15" data-name="Path 15" d="M3.375,15.875a12.5,12.5,0,1,0,12.5-12.5A12.5,12.5,0,0,0,3.375,15.875Zm1.923,0A10.573,10.573,0,0,1,23.351,8.4,10.573,10.573,0,1,1,8.4,23.351,10.486,10.486,0,0,1,5.3,15.875Z" transform="translate(-3.375 -3.375)" fill="#089f84" />
                </g>
              </svg>
            </div>
          </div>

        </figure>
      </div>

      <div class="col-12 col-md-4">
        <figure class="ctaCard background--white text-center position-relative">

          <div class="ctaCard__body">
            <span class="ctaCard__body-subheader">Subheader 2</span>
          </div>

          <div class="ctaCard__footer flex-align position-relative">
            <div class="ctaCard__footer--hidden">
              <span class="ctaCard__footer-text">Learn more</span>
            </div>
            <div class="ctaCard__footer--visible">
              <svg id="Group_397" data-name="Group 397" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
                <g id="Icon_ionic-ios-arrow-dropright" data-name="Icon ionic-ios-arrow-dropright">
                  <path id="Path_14" data-name="Path 14" d="M14.665,10.244a.823.823,0,0,1,1.2,0l4.2,4.44a.929.929,0,0,1,.026,1.234l-4.14,4.376a.82.82,0,0,1-1.2,0,.929.929,0,0,1,0-1.267l3.519-3.763-3.607-3.763A.919.919,0,0,1,14.665,10.244Z" transform="translate(-4.866 -2.77)" fill="#089f84" />
                  <path id="Path_15" data-name="Path 15" d="M3.375,15.875a12.5,12.5,0,1,0,12.5-12.5A12.5,12.5,0,0,0,3.375,15.875Zm1.923,0A10.573,10.573,0,0,1,23.351,8.4,10.573,10.573,0,1,1,8.4,23.351,10.486,10.486,0,0,1,5.3,15.875Z" transform="translate(-3.375 -3.375)" fill="#089f84" />
                </g>
              </svg>
            </div>
          </div>

        </figure>
      </div>

    </div>
  </div>
</section>

Answer 2

而不是 display:none 请给出显示隐藏的 white-space:nowrap; overflow:hidden;width:0;。还有

.ctaCards .ctaCard:hover .ctaCard__footer--hidden {
  width: auto;
  display: block;
}

而是给你需要的宽度。

.ctaCards .ctaCard:hover .ctaCard__footer--hidden {
 width: 100px;
}

让我们给动画

.ctaCards .ctaCard:hover .ctaCard__footer-text {
   -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
}

请检查这个

:root {
  --white: #FFFFFF;
  --black-2: #2C3645;
}

.ctaCards {
  background-color: #E7E6E0;
  padding: 100px 0;
}

.ctaCards .ctaCard {
  border-radius: 10px;
  box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.08);
  padding: 44px 43px 54px 43px;
  max-width: 340px;
  margin: 0 auto 60px auto;
  //display: flex;
  flex-direction: column;
  align-self: stretch;

}

.ctaCards .ctaCard:hover .ctaCard__footer svg path {
  fill: var(--black-2);
}

.ctaCards .ctaCard:hover .ctaCard__footer-text {
   -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;

}

.ctaCards .ctaCard:hover .ctaCard__footer--hidden {
 width: 100px;
  
}

.ctaCards .ctaCard__header {
  margin-bottom: 25px;
}

.ctaCards .ctaCard__body {
  flex: 1;
}

.ctaCards .ctaCard__footer {
  margin-top: 30px;
}

.ctaCards .ctaCard__footer-text {
  margin-right: 20px;
  width: 0;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.ctaCards .ctaCard__footer--hidden {
        width:0%;
  
    white-space:nowrap;
    overflow:hidden;

  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.ctaCards .ctaCard__footer--visible {
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.background--white {
  background-color: var(--white);
}

.flex-align {
  display: flex;
  align-items: center;
  justify-content: center;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<section class="ctaCards">
  <div class="container">
    <div class="row">

      <div class="col-12 col-md-4">
        <figure class="ctaCard background--white text-center position-relative">

          <div class="ctaCard__body">
            <span class="ctaCard__body-subheader">Subheader</span>
          </div>

          <div class="ctaCard__footer flex-align position-relative">
            <div class="ctaCard__footer--hidden">
              <span class="ctaCard__footer-text">Learn more</span>
            </div>
            <div class="ctaCard__footer--visible">
              <svg id="Group_397" data-name="Group 397" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
                <g id="Icon_ionic-ios-arrow-dropright" data-name="Icon ionic-ios-arrow-dropright">
                  <path id="Path_14" data-name="Path 14" d="M14.665,10.244a.823.823,0,0,1,1.2,0l4.2,4.44a.929.929,0,0,1,.026,1.234l-4.14,4.376a.82.82,0,0,1-1.2,0,.929.929,0,0,1,0-1.267l3.519-3.763-3.607-3.763A.919.919,0,0,1,14.665,10.244Z" transform="translate(-4.866 -2.77)" fill="#089f84" />
                  <path id="Path_15" data-name="Path 15" d="M3.375,15.875a12.5,12.5,0,1,0,12.5-12.5A12.5,12.5,0,0,0,3.375,15.875Zm1.923,0A10.573,10.573,0,0,1,23.351,8.4,10.573,10.573,0,1,1,8.4,23.351,10.486,10.486,0,0,1,5.3,15.875Z" transform="translate(-3.375 -3.375)" fill="#089f84" />
                </g>
              </svg>
            </div>
          </div>

        </figure>
      </div>

      <div class="col-12 col-md-4">
        <figure class="ctaCard background--white text-center position-relative">

          <div class="ctaCard__body">
            <span class="ctaCard__body-subheader">Subheader 2</span>
          </div>

          <div class="ctaCard__footer flex-align position-relative">
            <div class="ctaCard__footer--hidden">
              <span class="ctaCard__footer-text">Learn more</span>
            </div>
            <div class="ctaCard__footer--visible">
              <svg id="Group_397" data-name="Group 397" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
                <g id="Icon_ionic-ios-arrow-dropright" data-name="Icon ionic-ios-arrow-dropright">
                  <path id="Path_14" data-name="Path 14" d="M14.665,10.244a.823.823,0,0,1,1.2,0l4.2,4.44a.929.929,0,0,1,.026,1.234l-4.14,4.376a.82.82,0,0,1-1.2,0,.929.929,0,0,1,0-1.267l3.519-3.763-3.607-3.763A.919.919,0,0,1,14.665,10.244Z" transform="translate(-4.866 -2.77)" fill="#089f84" />
                  <path id="Path_15" data-name="Path 15" d="M3.375,15.875a12.5,12.5,0,1,0,12.5-12.5A12.5,12.5,0,0,0,3.375,15.875Zm1.923,0A10.573,10.573,0,0,1,23.351,8.4,10.573,10.573,0,1,1,8.4,23.351,10.486,10.486,0,0,1,5.3,15.875Z" transform="translate(-3.375 -3.375)" fill="#089f84" />
                </g>
              </svg>
            </div>
          </div>

        </figure>
      </div>

    </div>
  </div>
</section>

使文本出现在悬停时（并将图标推出）

Make text appear on hover (and push icon out)

html

css

sass