div 元素未显示

Question

我目前正在设计一个网站，该网站需要一个 div 元素，以便在将鼠标悬停在图像上方时显示在该图像之上。这些图像位于轮播中，当它们悬停时会展开并改变它们的大小，我希望描述 (sc-desc) 在被选中时显示的尺寸与其顶部的图像相同。目前，当我将鼠标悬停在图片上时，找不到描述。

section,
html {
  margin: 0px;
  padding: 0px;
}

body,
html {
  margin: 0px;
  padding: 0px;
}

html ::-webkit-scrollbar {
  display: none;
}

.maincontent {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}

.layout-T1 {
  /*background-color: #333;*/
  background-color: inherit;
  width: 1fr;
  height: 1fr;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 88vh 33% 33% 33% 33% 33%;
  column-gap: 0px;
  row-gap: 0px;
}

.sc-T1 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  overflow: hidden;
  aspect-ratio: 1.5/1;
  width: 90%;
  margin-top: 2.2%;
  margin-left: auto;
  margin-right: auto;
  max-height: 88vh;
  padding: none none none none;
  white-space: nowrap;
  border-style: solid;
  border-width: 0.1px;
  border-color: #333;
  border-radius: 5px 5px 5px 5px;
  grid-row: 1;
  grid-column: 1 / span 3;
}

#sc-T1-a:hover {
  width: 84%;
  #sc-a-desc {
    display: shown !important;
  }
  #sc-T1-b {
    width: 1fr;
  }
  #sc-T1-c {
    width: 1fr;
  }
  #sc-c-desc {
    display: hidden !important;
  }
}

#sc-T1-b:hover {
  width: 84% !important;
  #sc-b-desc {
    display: shown !important;
  }
  #sc-T1-c {
    width: 1fr !important;
  }
  #sc-c-desc {
    display: hidden !important;
  }
  #sc-T1-a {
    width: 1fr !important;
  }
}

.sc-T1-I img {
  margin: 0px;
  border-width: 0px;
  aspect-ratio: 1.26 / 1;
  height: 100%;
}

#sc-T1-a,
#sc-T1-b {
  cursor: pointer;
  width: 7%;
  display: inline-block;
  transition: width 0.25s;
  overflow: hidden;
  height: 100%;
}

#sc-T1-c {
  cursor: pointer;
  width: 84%;
  display: inline-block;
  transition: width 0.25s;
  overflow: hidden;
  height: 100%;
}

.sc-T1-I {
  margin: 0px;
  padding: 0px;
  position: relative;
}

.sc-T1-I img {
  z-index: 1;
}

#sc-T1-a,
#sc-T1-b {
  display: hidden;
}

#sc-T1-c {
  display: shown;
}

.sc-T1-I .sc-desc {
  display: inline-block;
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: #333;
  opacity: 50%;
}

<div class='maincontent'>
  <div class='layout-T1'>
    <div class='sc-T1'>
      <div class='sc-T1-I' id='sc-T1-a'>
        <img src='/bucket/8LiuyJubP9p8tzqrdFAUdld8XV5jzdTRH-aFJdiHbfM.webp'>
        <div class='sc-desc' id='sc-a-desc'>afdd</div>
      </div>
      <div class='sc-T1-I' id='sc-T1-b'>
        <img src='/bucket/crop.jfif'>
        <div class='sc-desc' id='sc-b-desc'>jnfakd</div>
      </div>
      <div class='sc-T1-I' id='sc-T1-c'>
        <img src='/bucket/8LiuyJubP9p8tzqrdFAUdld8XV5jzdTRH-aFJdiHbfM.webp'>
        <div class='sc-desc' id='sc-c-desc'>uids</div>
      </div>
    </div>
  </div>
  <div class='sc-T2'></div>
</div>

另外，展示元素之间有一个奇怪的空白，我似乎无法摆脱。如果有人能弄清楚如何删除它，将不胜感激

Answer 1

您可能想要这样的东西（将图像 div 替换为实际的 img）。重要的部分是在叠加 div 上使用 position: absolute，并将其父 div 设置为 position: relative。这将使叠加层 div 相对于父级 div 的绝对位置。如果你没有在父元素上设置 position: relative，它相对于 body 元素将是绝对的。

carousel {
  display: flex;
  gap: 20px;
  
  flex-wrap: wrap;
}

.image-container {
  width: 200px;
  height: 200px;
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  color: transparent;
  display: grid;
  place-items: center;
}

.overlay:hover {
color: white;
  background-color: rgba(0, 0, 0, 0.3);
}

.square-image {
  width: 100%;
  height: 100%;
  background-color: pink;
}

<carousel>
  <div class="image-container">
    <div class="overlay">i am overlay 1</div>
    <div class="square-image">i am image 1</div>
  </div>
  
  <div class="image-container">
    <div class="overlay">i am overlay 2</div>
    <div class="square-image">i am image 2</div>
  </div>
  
  <div class="image-container">
    <div class="overlay">i am overlay 3</div>
    <div class="square-image">i am image 3</div>
  </div>
  
  <div class="image-container">
    <div class="overlay">i am overlay 4</div>
    <div class="square-image">i am image 4</div>
  </div>
</carousel>

div 元素未显示

div element not displaying

html

css