幻灯片图像鼠标悬停下拉CSS

Question

我制作了自动图像幻灯片。 当我将鼠标悬停在幻灯片图像上时，我想制作一个下拉图像。 我已经放置了下拉 css、html 代码，但它不起作用。有什么办法解决这个问题吗？

当我将鼠标悬停在幻灯片图像上时，我想制作一个下拉图像。

Answer 1

很可能是因为 css 中缺少 '

height

' 属性。 这是您的简化代码，并且运行良好：

.dd {
  position: relative;
  display: inline-blick;
  width: 200px;
  height: 200px;
  background: green;
}

.dc {
  display: none;
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 100px;
  background: silver;
}

.dd:hover .dc {
  display: block;
}

<div class='dd sl'>
  <div class='dc'>

  </div>
</div>

此外，最好不要在标记样式属性内编写样式，而应在 css 文件或块内编写样式。