css 当光标悬停在(同一)父元素上方时，为多个子元素创建不同的过渡动画

bvpmtnay 于 11个月前发布在其他

关注(0)|答案(1)|浏览(192)

我的CSS和HTML代码是这样的：

.item-video-kami {
  width: 480px;
  overflow: hidden;
  position: relative;
}

.item-video-kami>.play-icon.full-height>svg {
  width: 106px;
  color: #ffffff50;
}

.item-video-kami img {
  transition: all .5s ease;
}

.item-video-kami>.play-icon {
  height: 100%;
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: #1e1e1e94;
  opacity: 0;
  /* Initial opacity set to 0 */
  transition: opacity 0.2s ease-in 0.1s;
}

.item-video-kami:hover img {
  transform: scale(1.1);
}

.item-video-kami:hover .play-icon {
  opacity: 0.8;
  /* Adjusted opacity value to 0.8 for 80% */
}

个字符
预期的结果是，当光标悬停在.item-video-甲米上方时，图像将缩放（按比例放大），同时，div. play图标将不透明度更改为0.8
但是在上面的片段中，动画只用于放大图像，但第二个动画不是触发器（如果不清楚，请检查片段）

css

来源：https://stackoverflow.com/questions/77721576/create-diffrent-transition-animation-for-multiple-child-element-when-cursor-hove

1条答案

按热度按时间

d5vmydt91#

这是预期的输出吗？

.item-video-kami {
  overflow: hidden;
  position: relative;
  position: relative;
  height: 100%;
  display: inline-block;
}

.item-video-kami>.play-icon.full-height>svg {
  width: 106px;
  color: #ffffff50;
}

.item-video-kami img {
  transition: all .5s ease;
}

.item-video-kami>.play-icon {
    height: 100%;
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: #1e1e1e94;
    opacity: 0;
    top: 0;
    transition: opacity 0.2s ease-in 0.1s;
    bottom: 0;
    left: 0;
    right: 0;
}

.item-video-kami:hover img {
  transform: scale(1.1);
}

.item-video-kami:hover .play-icon {
  z-index: 2;
  opacity: 0.8;
  /* Adjusted opacity value to 0.8 for 80% */
}

个字符

赞(0）回复(0）举报 11个月前

我来回答

css 当光标悬停在(同一)父元素上方时，为多个子元素创建不同的过渡动画

1条答案

相关问题

热门标签

最新问答