时间戳

首页 > 解决方案 > 悬停时段落在我的 div 之外重叠

html - 悬停时段落在我的 div 之外重叠

问题描述

我正在尝试在我的视频下方添加一个黑色容器，并在悬停时在该黑色容器内添加标题和描述，但与黑色容器重叠的描述如何将其保留在黑色容器内。

.previewContainer.small {
  position: relative;
  width: 230px;
  height: 129px;
  margin-right: 4px;
  display: inline-flex;
  transition: 0.5s ease;
  overflow: hidden;
  white-space: nowrap;
  flex: 1 1 0px;
  transition: transform 500ms;
}

.title{
  display: none;
}

.previewContainer.small:focus-within,
.previewContainer.small:hover{
  margin-left: 65px;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;
  width: 230px;
  height: 250px;
  background-color: #141414;
  border-radius: 5px;
}

.small:focus ~ .small,
.small:hover ~ .small {
  transform: translateX(25%);
}

.previewContainer.small:focus,
.previewContainer.small:hover {
  transform: scale(1.6);
  z-index: 1;
}

.Play{
  position: absolute;
  width: 100%;
  display: flex;
  margin-left: 10px;
  background-color: transparent;
  font-size: 10px;
  padding: 0px;
  transition-duration: 1s;
}

.title{
  position: absolute;
  text-transform: capitalize;
  width: 100%;
  display: flex;
  margin-left: 10px;
  background-color: transparent;
  font-size: 5px;
  transition-duration: 1s;
}

.description{
  position: absolute;
  display: flex;
  padding-top: 30px;
  margin-left: 10px;
  background-color: transparent;
  text-decoration:none;
  overflow: hidden;
  color: white;
}

.title h6{
  color:#fff !important;
  font-weight: 300;
    font-size: 14px;
}
.video-item {
  position: relative;
  max-width: 100%;
  transition: transform 0.2s;
  z-index: 1;
  cursor: pointer;
  border-radius: 4px;
  object-fit: cover;
}
<div class="previewContainer">
          <div class="previewContainer small">
            <a href"">
              <video class="mylist-img video-item" onmouseover="this.play()" onmouseout="this.pause();">
                <source src="https://sgcholdings.co.za/Backend/media/sample-30s.mp4">
                Your browser does not support the video tag.
              </video>
              <div class="title">
                <h6>Video One</h6>
              </div>
              <div class="description">
                <p class="">Loren ipsum dolor sit amet because there are two,
                  there is web version which works on hover with a small pop up then </p>
              </div>
            </a>
          </div>
        </div>

所以我想将描述包含在我悬停时出现的黑色背景中。有人可以帮助如何包含段落标签不重叠

标签： htmlcss

解决方案

您可以使用以下代码更新您的 CSS

.description {
    white-space: normal;
}

white-space:normal空白序列被折叠。源中的换行符的处理方式与其他空格相同。必要时换行以填充行框。

推荐阅读