懸停卡片正文時如何將卡片正文中的文本向左滾動

我有一個帶有卡片標題和卡片文本的 Bootstrap 5 卡片正文，卡片正文中有文本。如何設定我的 CSS 樣式，以便在將滑鼠懸停在卡片標題上時卡片標題會自動水平滾動？

例子：

 <div className="card-body ">
                      <h5
                        style={{ textAlign: "center" }}
                        className="card-title" 
                      >
                        <Link
                          to={`/show/${userShow.show.id}`}
                         className="stretched-link"
                          id="links"
                        >
                          <span style={{ fontWeight: "bold", color: "white" }}>
                            {userShow.show.name}
                          </span>
                        </Link>
                      </h5>
                      <span className="card-text">
                        <h6
                          style={{
                            textAlign: "center",
                            fontSize: "14px",
                            fontWeight: 400,
                            color: "white",
                          }}
                        >
                          {" "}
                          {userShow.show.publisher}
                        </h6>
                      </span>
                    </div>

請幫忙！

uj5u.com熱心網友回復：

這里很棒的文章解釋了如何做到這一點。

.content {
  padding: 17px 0 17px 17px;
  width: 300px;
  height: 200px;
  overflow-y: scroll;
  mask-image: linear-gradient(to top, transparent, black),
    linear-gradient(to left, transparent 17px, black 17px);
  mask-size: 100% 20000px;
  mask-position: left bottom;
  -webkit-mask-image: linear-gradient(to top, transparent, black),
    linear-gradient(to left, transparent 17px, black 17px);
  -webkit-mask-size: 100% 20000px;
  -webkit-mask-position: left bottom;
  transition: mask-position 0.3s, -webkit-mask-position 0.3s;
}

.content:hover {
  -webkit-mask-position: left top;
}

@keyframes background {
  from {
    background: pink;
  }
  to {
    background: #c0d6ff;
  }
}

.wrapper {
  float: left;
  animation: background 5s infinite alternate;
}

<div class="wrapper">
  <div class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

uj5u.com熱心網友回復：

我假設您的意思是選框效果。

下面的代碼可以創建一個只有當你滾動時才會滾動的選取框mouseover，但是我無法讓它默認停止，onshowandonload屬性似乎不起作用。

<marquee
    onmouseover="this.start()"
    onshow="this.stop()"
    onload="this.stop()"
    onmouseout="this.stop()"
>
    Card heading
</marquee>

uj5u.com熱心網友回復：

像這樣添加CSS：

.card-body:hover .card-title{
 position: relative;
 animation: scroll  2s infinite;
      }
@keyframes scroll {
  0%,
  100% {
    margin-left: 0;
  }

  50% {
    margin-left: 200px;
  }
}

標籤：javascript html css

上一篇：MongoDB-使用聚合對內部陣列進行排序

下一篇：單擊關閉btn時如何清空陣列的輸入欄位？