CSS：在悬停时隐藏div并同时显示图像？

Question

已经提出了类似的问题，但它没有为我的问题提供解决方案。 CSS: On hover show and hide different div's at the same time?

我想隐藏div并在我将鼠标悬停在列表项目上的同时在页面中心显示图像。

我尝试了这个，但是页面中间的第二个div仍然显示在悬停状态。

sc

/* absorbing paddings within the div's width, instead of adding it 
on top */

* {
  box-sizing: border-box;
}

#container {
  width: 100%;
}

header {
  padding-top: 10px;
}

h1 {
  text-align: center;
  font-size: 150%;
}

.a {
  width: 7%;
  height: 48px;
}

.b {
  width: 45%;
  height: 48px;
}

.a,
.b {
  display: inline-block;
  vertical-align: top;
  padding: 5px;
  padding-top: 10px;
  margin: 5px;
  margin-right: 195px;
}

.a,
ul {
  list-style: none;
  line-height: 150%;
  padding-top: 15px
}

li a {
  text-decoration: none;
  color: inherit;
}

.b,
h2 {
  text-align: center;
}

.projectImage {
  display: none;
}

.a:hover .projectImage {
  display: block;
}

.a:hover .b {
  display: none;
}

.a,
.image1:hover .projectImage {}

https://codepen.io/jordan_miguel/pen/dWNbzL?editors=1100

Answer 1

由于元素.a和元素.b在您提供的标记中彼此相邻，因此您可能希望使用sibling selector来定位元素.b。只需将您的上一个声明块更改为：

.a:hover + .b {
  display: none;
}

这是一个updated Codepen。

希望这有帮助！如果您有任何问题，请告诉我。