img "glued" 悬停在分区上。如何在保持关系的同时让它出现在别处

Question

我对整个游戏非常陌生，几乎每天都在处理问题。大多数时候我用google来解决它们，学到了很多东西，但这次我什么也找不到。

所以，我得到了这个可爱的 header，它向右移动并为另一个元素制作了一些 space。当我将鼠标悬停在 header.

上时，我希望这个元素（倭黑猩猩头部）出现

因此，我将图像的显示设置为 none，并在 header:hover 上设置为 block，但图像似乎粘在了 header.[=16 上=]

我希望它出现在它旁边，在任何指定位置。做什么？

.header {
  position: relative;
  display: block;
  left: 0%;
  padding: 15px;
  background-color: #54e954;
  text-align: center;
  width: 100%;
  height: auto;
  transition: 2s;
  border-radius: 8px;
}

.header:hover {
  left: 15%;
  background-color: #d0f307;
}

.photo {
  position: relative;
  display: none;
}

.header:hover .photo {
  display: block;
}

<div class="header">
  <h1 class="h1header">Lorem Ipsum</h1>
  <div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Bonobo-Head.jpg" class="photo">
  </div>
</div>

Answer 1

这是你想要的样子吗？如果你想要这个，我用 display flex 结构做到了。

.header {
  position: relative;
  display: flex;  /* added */
  justify-content: center; 
  align-items: center; 
  left: 0%;
  padding: 15px;
  background-color: #54e954;
  text-align: center;
  width: 100%;
  height: auto;
  transition: 2s;
  border-radius: 8px;
}

.header:hover {
  left: 15%;
  background-color: #d0f307;
}

.photo {
  position: relative;
  display: none;
}

.header:hover .photo {
  display: block;
}

<div class="header">
  <h1 class="h1header">Lorem Ipsum</h1>
  <div class="img-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Bonobo-Head.jpg" class="photo">
  </div>
</div>

更新：使用Javascript，您可以更好地控制悬停和悬停操作。这是我为您准备的示例。顺便说一下，我必须从 header 标签中取出 img 标签。你可以看到我添加的内容。

let header = document.querySelector(".header");
let imageContainer = document.querySelector(".img-container");
header.onmouseover = function() {
  imageContainer.classList.add("showImage");
}
header.onmouseout = function() {
  imageContainer.classList.remove("showImage");
}

.header {
  position: relative;
  display: flex;
  /* added */
  justify-content: center;
  align-items: center;
  left: 0%;
  padding: 15px;
  background-color: #54e954;
  text-align: center;
  width: 100%;
  height: 80px;
  transition: 1s;
  border-radius: 8px;
}

.header:hover {
  transform: translateX(15%);
  /* added*/
  background-color: #d0f307;
}

.img-container {
  position: relative;
  display: none;
}

.img-container.showImage {
  position: relative;
  display: block;
}

.container {
  display: flex;
  justify-content: space-between;
}

<div class="container">
  <div class="img-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Bonobo-Head.jpg" class="photo">
  </div>
  <div class="header">
    <h1 class="h1header">Lorem Ipsum</h1>
  </div>
</div>

img "glued" 悬停在分区上。如何在保持关系的同时让它出现在别处

img "glued" to the division on hover. How to make it appear elsewhere while maintaining the relation

css

css-transitions

transition