CSS：ホバーでdivとshow imageを同時に非表示にしますか？

Question

同様の質問がありましたが、私の問題の解決策はありませんでした。 CSS: On hover show and hide different div's at the same time?

私はリストアイテムの上にマウスを置くと同時に、ページの中央に画像を表示したいと思います。

私はこれを試しましたが、ページ中央の2番目のdivはまだホバーに表示されています。

/* 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"><a href="#">Project<span><img class="image1" src="" alt="" height="" /></span></a></li> 
 

 
     <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li> 
 

 
     <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li> 
 

 
     <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li> 
 

 
     <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li> 
 

 
     <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li> 
 

 
     <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></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

要素.aと要素.bので、あなたはおそらく要素.bをターゲットにsibling selectorを使用したい、あなたが供給しているマークアップで互いにすぐ隣です。最後の宣言ブロックを次のように変更してください：updated Codepenです。

希望すると便利です。ご質問がある場合はお知らせください。