Question

我正在尝试通过以下代码来实现下拉式封面效果（不确定如何调用）：

.new_events_list {
  position: absolute;
  width: 26%;
  height: 28vh;
  background-color: #323642;
  cursor: pointer;
}

#new_events_list_effect {
  background-color: #ee5f95;
  width: 100%;
  opacity: 0.5;
  top: -100%;
  transition: 0.5s;
}

div.new_events_list:hover #new_events_list_effect {
  top: 0%;
  transition: 0.5s;
}

div.new_events_list:hover img {
  filter: grayscale(0.5);
  transition: 1s;
}

<div class="new_events_list" style="overflow: hidden;border-radius: 10px;">
  <img class="new_events_list" id="photo1" src="https://www.dpreview.com/files/p/articles/7395606096/Google-Photos.jpeg" alt="event_list_1" style=" object-fit: cover; width: 100%;border-radius: 10px;">
  <div class="new_events_list" id="new_events_list_effect">

  </div>

</div>

我面临的问题是，一旦将鼠标悬停在照片上，粉红色的块就会掉落下来，并带有可见的角，这些角只会在大约一秒钟后消失。谁能向我解释在没有角落的情况下如何掉下粉红色的div？非常感谢您的提前帮助。

Answer 1

以下代码应该起作用：

Jest has detected the following 1 open handle potentially keeping Jest from exiting:

●  TCPWRAP

    3 |
    4 | beforeAll(() => {
    > 5 |     red = redis.createClient();
        |                 ^
    6 | });
    7 |
    8 | afterAll((done) => {

    at RedisClient.Object.<anonymous>.RedisClient.create_stream (node_modules/redis/index.js:251:31)
    at new RedisClient (node_modules/redis/index.js:159:10)
    at Object.<anonymous>.exports.createClient (node_modules/redis/index.js:1089:12)
    at Object.<anonymous>.beforeAll (src/sockets/redis.integration.test.ts:5:17)

.new_events_list {
  position: relative;
  width: 26%;
  backgorund-color: black;
  border-radius: 10px;
  overflow: hidden;
}

.image {
  width: 100%;
}

.new_events_list_effect {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #ee5f95;
  opacity: 0.5;
  top: -100%;
  transition: 0.5s;
  border-radius: 10px;
}

.new_events_list:hover .new_events_list_effect {
  top: 0%;
  transition: 0.5s;
}

为什么CSS中的溢出会延迟工作？

1 个答案: