具有非均匀背景的块内的渐变边框

Question

Web_Dev

Asked:2022-08-12 16:59:26 +0000 UTC2022-08-12 16:59:26 +0000 UTC 2022-08-12 16:59:26 +0000 UTC

使用悬停时块显示不正确

772

我无法让悬停效果正常工作。悬停时，带有文本的所需块应完全展开并显示文本的隐藏部分。但结果，所有相邻的块也开始拉伸到目标扩展块的宽度，所有较低的块都移开，这是不应该的。悬停时，上部块应部分隐藏下部块。屏幕截图显示了它应该是怎样的。

我发生什么事了：

codepen - https://codepen.io/Den323/pen/poLOKxG

我的html：

<div class="courses">
    <div class="container">

      <div class="courses__title">
      Курсы
    </div>

    <div class="courses__inner">


      <div class="courses__item" style="background: 
rgba(255, 182, 182, 1);">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++  с нуля до героя
        </div>
        <p class="courses__item-text">
        s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime? <p class="courses__hidden">
           ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

          <a class="courses__item-link" href="#">
            Детальнее
          </a>
          </p> 
        </p>
      </div>

      <div class="courses__item">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++  с нуля до героя
        </div>
        <p class="courses__item-text">
         s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
         ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>

      <div class="courses__item" style="background: #FFF7B9;">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          JS  с нуля и до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
         ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>

      <div class="courses__item" style="background: #CCC1F6;">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++  с нуля до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
          ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>

      <div class="courses__item" style="background: #CCC1F6;">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++  с нуля до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
         ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>

      <div class="courses__item" style="background: #FFF7B9;">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
        JS  с нуля и до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
          ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>

      <div class="courses__item" style="background: #FFB6B6;">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++  с нуля до героя
        </div>
        <p class="courses__item-text">
         s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
          ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>
      
          <div class="courses__item" style="background: #C2E0FF;">
          
            <img class="courses__img" src="images/icons/courses.svg" alt="">
            <div class="courses__item-name">
              C++  с нуля до героя
            </div>
            <p class="courses__item-text">
             s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
            <p class="courses__hidden">
              ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          
              <a class="courses__item-link" href="#">
                Детальнее
              </a>
            </p>
            </p>
          </div>

     
      

      


    </div>

    </div>
    
  </div>

我的CSS：

courses {
  padding-bottom: 160px;
}

.courses__title {
  font-family: 'Bitter';
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: 0.5px;
  color: rgba(35, 38, 45, 1);
  margin-top: 36px;
  margin-bottom: 70px;
}

.courses__item {
  padding: 30px 20px;
  max-width: 285px;
  background: rgba(194, 224, 255, 1);
  border-radius: 8px;
  cursor: pointer;


}

.courses__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 2fr));
  grid-row-gap: 37px;
  grid-column-gap: 30px;
}

.courses__item-name {
  font-family: 'Segoe UI';
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  color: rgba(35, 38, 45, 1);
  margin-top: 30px;
  margin-bottom: 20px;
  width: 221px;
}

.courses__item-text {
  font-family: 'Segoe UI';
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;

}


.courses__item-link {
  font-family: 'Bitter';
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  color: rgba(35, 38, 45, 1);
  text-align: right;
  display: block;
  position: relative;
  margin-top: 20px;
}

.courses__item-link::before {
  content: '';
  width: 95px;
  height: 2px;
  background-color: #000;
  position: absolute;
  top: 18px;
  right: 0;
}



.courses__hidden {
  display: none;
  font-family: 'Segoe UI';
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}


.courses__item:hover .courses__hidden {
  display: inline;
  z-index: 10;

}

1 个回答

Voted

soledar10 · Answer 1 · 2022-08-12T17:12:39Z

您需要使用position: absolute

例子

courses {
  padding-bottom: 160px;
}

.courses__title {
  font-family: 'Bitter';
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: 0.5px;
  color: rgba(35, 38, 45, 1);
  margin-top: 36px;
  margin-bottom: 70px;
}

.courses__item {
  padding: 30px 20px;
  max-width: 285px;
  background: rgba(194, 224, 255, 1);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
}

.courses__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 2fr));
  grid-row-gap: 37px;
  grid-column-gap: 30px;
}

.courses__item-name {
  font-family: 'Segoe UI';
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  color: rgba(35, 38, 45, 1);
  margin-top: 30px;
  margin-bottom: 20px;
  width: 221px;
}

.courses__item-text {
  font-family: 'Segoe UI';
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

.courses__item-link {
  font-family: 'Bitter';
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  color: rgba(35, 38, 45, 1);
  text-align: right;
  display: block;
  position: relative;
  margin-top: 20px;
}

.courses__item-link::before {
  content: '';
  width: 95px;
  height: 2px;
  background-color: #000;
  position: absolute;
  top: 18px;
  right: 0;
}

.courses__hidden {
  display: none;
  font-family: 'Segoe UI';
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  position: absolute;
  top: calc(100% - 40px);
  left: 0;
  padding: 0 20px 30px;
  border-radius: 0 0 8px 8px;
}

.courses__item:hover .courses__hidden {
  display: block;
  z-index: 10;
  background: rgba(194, 224, 255, 1);
  box-shadow: 0 4px 2px -2px gray;
}

<div class="courses">
  <div class="container">

    <div class="courses__title">
      Курсы
    </div>

    <div class="courses__inner">


      <div class="courses__item" style="background: 
rgba(255, 182, 182, 1);">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++ с нуля до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          <p class="courses__hidden" style="background: 
rgba(255, 182, 182, 1);">
            ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

            <a class="courses__item-link" href="#">
              Детальнее
            </a>
          </p>
        </p>
      </div>

      <div class="courses__item">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++ с нуля до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          <p class="courses__hidden">
            ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

            <a class="courses__item-link" href="#">
              Детальнее
            </a>
          </p>
        </p>
      </div>

      <div class="courses__item" style="background: #FFF7B9;">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          JS с нуля и до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          <p class="courses__hidden" style="background: #FFF7B9;">
            ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

            <a class="courses__item-link" href="#">
              Детальнее
            </a>
          </p>
        </p>
      </div>

      <div class="courses__item" style="background: #CCC1F6;">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++ с нуля до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          <p class="courses__hidden" style="background: #CCC1F6;">
            ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

            <a class="courses__item-link" href="#">
              Детальнее
            </a>
          </p>
        </p>
      </div>

      <div class="courses__item" style="background: #CCC1F6;">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++ с нуля до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          <p class="courses__hidden" style="background: #CCC1F6;">
            ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

            <a class="courses__item-link" href="#">
              Детальнее
            </a>
          </p>
        </p>
      </div>

      <div class="courses__item" style="background: #FFF7B9;">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          JS с нуля и до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          <p class="courses__hidden" style="background: #FFF7B9;">
            ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

            <a class="courses__item-link" href="#">
              Детальнее
            </a>
          </p>
        </p>
      </div>

      <div class="courses__item" style="background: #FFB6B6;">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++ с нуля до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          <p class="courses__hidden" style="background: #FFB6B6;">
            ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

            <a class="courses__item-link" href="#">
              Детальнее
            </a>
          </p>
        </p>
      </div>

      <div class="courses__item" style="background: #C2E0FF;">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++ с нуля до героя
        </div>
        <p class="courses__item-text" style="background: #C2E0FF;">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          <p class="courses__hidden">
            ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime? ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime? ?s doloribus quas, distinctio
            vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime? ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

            <a class="courses__item-link" href="#">
              Детальнее
            </a>
          </p>
        </p>
      </div>







    </div>

  </div>

</div>

使用悬停时块显示不正确

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

使用悬停时块显示不正确

1 个回答

相关问题