Question

我在:hover上遇到了一些问题。所以我想要的是，当我将鼠标悬停在城堡的门上时，即称为#dor的div，#vindu1应该将颜色更改为黄色。因此，将鼠标悬停在城堡的门上时，窗户应该变黄。由于某种原因，这是行不通的，我认为这与图像和图层有关。

因此，要缩小问题范围，是我的代码不允许我将鼠标悬停在#dor上以更改background-color的{{1}}

如果有人可以帮助我理解为什么它不起作用，我将永远感激不已。该网站现在在我的屏幕上看起来不错，但是我觉得对于其他尺寸的屏幕，一切都会变得很奇怪。

那么我可以对背景/图像进行哪些更改以使它们更具响应性。

非常感谢所有帮助。预先感谢！

#vindu1

body {
  margin: 0;
  background-color: #d37421;
}

#container {
  position: relative;
}

#siluette {
  position: fixed;
  bottom: 0;
  width: 100rem;
}

#slott {
  position: fixed;
  bottom: 0px;
  left: 630px;
}

#dor {
  position: absolute;
  left: 892px;
  background-color: black;
  width: 54px;
  height: 85px;
  top: 686px;
  opacity: 0;
}

#dor:hover {
  opacity: 1;
}

#dor:hover~#vindu1 {
  background-color: yellow;
}

#vindu1 {
  position: absolute;
  background-color: black;
  left: 688px;
  top: 600px;
  height: 200px;
  width: 474px;
}

#maane {
  position: fixed;
  width: 200px;
  height: 200px;
  background-color: rgb(221, 22, 22);
  top: 60px;
  right: 100px;
  border-radius: 50%;
  transition: 3s;
}

#maane:hover {
  background-color: yellow;
}

请帮助CSS初学者：悬停

0 个答案: