悬停有问题答案

【问题标题】：Having trouble with Hover悬停有问题
【发布时间】：2017-02-25 20:35:48
【问题描述】：

您好，我无法让 :hover 处理 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>

【问题讨论】：

请更新我为你制作的sn-p

标签： html css hover

【解决方案1】：

您没有任何 ID="sidebar#"，对不起，我的电话中的简短回答，请检查您的 ID

【讨论】：

【解决方案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 标签即可。

【讨论】：

谢谢，但我想做的是让“MainImage1”/“ClassMainImage1”代替“MainImage”/“ClassMainImage”并让“SideBar1”/“SideBarYellowImage”留在当您将鼠标悬停在“SideBar1”/“SideBarYellowImage”上时，它就会出现。
哦，你想切换它们吗？很简单，只要加上 .left:hover {margin-left: 50%;}
不抱歉，我正在尝试让您将鼠标悬停在 SideBar1 上，然后 SideBar1 没有任何反应，它会留在原位，但 MainImage 上会出现与 sidebar1 上的图像相似的图像。
那你想用javascript。
好的，我会研究一下，但我以前用 CSS 做过类似的事情。