CSS: On hover hide div and show image at the same time? - css

Question

A similar question has been asked but it didn't provide a solution for my issue. CSS: On hover show and hide different div's at the same time?
I want to hide a div and display an image in the center of the page at the same time when I hover over my list items.
I tried this but it the second div in the middle of the page still shows on hover.
/* 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 {}
<div id="container">
<header id="title">
<h1>Lorem Ipsum</h1>
</header>
<div class="a">
<ul class="projectList">
<li class="projectImage">Project<span><img class="image1" src="" alt="" height="" /></span></li>
<li>Project<span><img src="" alt="" height="" /></span></li>
<li>Project<span><img src="" alt="" height="" /></span></li>
<li>Project<span><img src="" alt="" height="" /></span></li>
<li>Project<span><img src="" alt="" height="" /></span></li>
<li>Project<span><img src="" alt="" height="" /></span></li>
<li>Project<span><img src="" alt="" height="" /></span></li>
</ul>
</div>
<div class="b">
<h2>lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis. Mi elit ante nunc, mi odio congue rhoncus
dui quis dictum, lectus eleifend aliquam sed venenatis vitae lorem, potenti non dictum sit. Condimentum nonummy vitae tristique, pede nullam pretium arcu vestibulum dictum, urna erat aliquam duis sit pede nam. Morbi mauris fermentum luctus morbi
nec eget, vitae fermentum et maecenas, primis ullamcorper mauris et diam nunc, turpis massa sit felis nullam.</p>
<p>Interdum morbi pellentesque. Et semper diam vestibulum, nisl est, porttitor mauris tellus hac, ut dictum massa. Elementum malesuada curabitur non euismod arcu, sit justo suspendisse aliquam purus suspendisse. Felis est leo, quis turpis ornare quis
tellus, fusce neque ut vitae justo penatibus molestie, per labore suscipit corrupti, non sed in id amet velit. Tempor rutrum tristique anim orci massa, arcu dolor eros dictum arcu.</p>
</div>
</div>
https://codepen.io/jordan_miguel/pen/dWNbzL?editors=1100

Answer 1

Since element .a and element .b are right next to each other in the markup you have supplied, you probably want to use the sibling selector to target element .b. Simply change your last declaration block to:
.a:hover + .b {
display: none;
}
Here's an updated Codepen.
Hope this helps! Let me know if you have any questions.