Question

基本上我有两个图像，一个没有光的灯和一个带灯的灯，当用户将鼠标悬停在图像上时，它会点亮灯。

我正在尝试将灯泡定位到绝对位置的特定位置，但是无论何时我缩放页面都会改变位置，现在我知道这是因为它不在页面的流程中所以我读了相关的把它放在一个与位置相对的div中的主题，我已经完成了这个但它仍然不起作用。

#cont {
  position: relative;
  height: 100%;
}
#cont a {
  position: absolute;
  bottom: 69px;
  left: 350px;
}
.foo img:last-child {
  display: none
}
.foo:hover img:first-child {
  display: none
}
.foo:hover img:last-child {
  display: inline-block
}

<section class="flexheader">
  <img class="logo" alt="" src="image/logo.png">
  <img class="house" alt="" src="image/house.png">
  <div id="cont">
    <a class="foo" href="#">
      <img alt="" src="image/lampnolight.png">
      <img alt="" src="image/lamp.png">
    </a>
  </div>
</section>

Answer 1

您需要使用它来完美缩放：

.flexheader,
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}

<强>段

＆＃13;

.flexheader,
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}
#cont {
  position: relative;
  height: 100%;
}
#cont a {
  position: absolute;
  bottom: 69px;
  left: 350px;
}
.foo img:last-child {
  display: none;
}
.foo:hover img:first-child {
  display: none;
}
.foo:hover img:last-child {
  display: inline-block;
}

＆＃13;

<section class="flexheader">
  <img class="logo" alt="" src="//placehold.it/100?text=logo" />
  <img class="house" alt="" src="//placehold.it/100?text=house" />
  <div id="cont">
    <a class="foo" href="#">
      <img alt="" src="//placehold.it/100?text=lampnolight" />
      <img alt="" src="//placehold.it/100/ccf?text=lamp" />
    </a>
  </div>
</section>

＆＃13;

绝对位置相对div？

1 个答案: