遇到麻烦问题

Question

您好我得到了：悬停在CSS / HTML上工作。 当鼠标悬停在SideBar1 / SideBar2上时，我试图让SideBar1 / SideBar2中的图像出现在主图像的位置，然后在移动鼠标后恢复正常。

忽略可怕的命名;）。

.ClassMainImage {
  position: absolute;
  height: 66%;
  width: 35%;
  top: 19%;
  left: 5%;
  opacity: 0;
}

#MainImageMain {
  position: absolute;
  width: 100%;
  height: 100%;
}

.ClassMainImage1 {
  position: absolute;
  height: 66%;
  width: 35%;
  top: 19%;
  left: 5%;
  opacity: 0;
}

.ClassMainImage2 {
  position: absolute;
  height: 66%;
  width: 35%;
  top: 19%;
  left: 5%;
  opacity: 0;
}

#MainImageMain1 {
  position: absolute;
  width: 100%;
  height: 100%;
}

#MainImageMain2 {
  position: absolute;
  width: 100%;
  height: 100%;
}

#SideBar1 {
  position: absolute;
  width: 15%;
  height: 30%;
  left: 45%;
  top: 19%;
  background-color: #ffffff;
}

#SideBar2 {
  position: absolute;
  width: 15%;
  height: 30%;
  left: 62.5%;
  top: 19%;
  background-color: #ffffff;
}

#SideBarYellowImage {
  position: absolute;
  width: 100%;
  height: 100%;
}

#SideBarBlackImage {
  position: absolute;
  width: 100%;
  height: 100%;
}

#SideBar1:hover #MainImage1 {
  opacity: 1;
}

#SideBar2:hover #MainImage2 {
  opacity: 1;
}

#SideBar1:hover #MainImage {
  opacity: 0;
}

#SideBar2:hover #MainImage {
  opacity: 0;
}

<div id="MainImage" class="ClassMainImage">
  <img id="MainImageMain" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTtuUMJsBgCOhtTj9tIjkc_9TmcEkLKEw2CJeT7bQ2MZ1JUawnPOw" alt="Blue">
</div>

<div id="MainImage1" class="ClassMainImage1">
  <img id="MainImageMain1" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT2-04tLiu3qiwynLAlNwp0tT2Q7OjhvpEj1RBx4kNWZ8PNaxqEFw" alt="Yellow">
</div>
<div id="MainImage2" class="ClassMainImage2">
  <img id="MainImageMain2" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTOBJix0WxTsEgPvemyH_pMAnZc3Y1oMgDzlLFeudnRNizM7Y7LZQ" alt="Black">
</div>

<div id="SideBar1">
  <img id="SideBarYellowImage" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT2-04tLiu3qiwynLAlNwp0tT2Q7OjhvpEj1RBx4kNWZ8PNaxqEFw" alt="Yellow">

</div>
<div id="SideBar2">
  <img id="SideBarBlackImage" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTOBJix0WxTsEgPvemyH_pMAnZc3Y1oMgDzlLFeudnRNizM7Y7LZQ" alt="Black">

</div>

Answer 1

你没有任何ID =＆＃34;侧边栏＃＆＃34;，对不起我手机的简短回答，请检查你的身份

Answer 2

.left,
.right {
  width: 100px;
  height: 50px;
  background-color: red;
  float: left;
  transition: all 1s ease-in-out;
}

.right {
  background-color: blue;
}

.left:hover+.right {
  margin-left: -100px;
}

<div class="left"></div>
<div class="right"></div>

我想是这样的吗？只需将div更改为您的img标记。