CSS：在懸停的同時隱藏div和顯示圖像？

Question

一個類似的問題已被問到，但它沒有提供我的問題的解決方案。 CSS: On hover show and hide different div's at the same time?

我想隱藏div並在我將鼠標懸停在列表項上的同時在頁面中央顯示圖像。

我試過了，但它在頁面中間的第二個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緊挨着在您提供的標記對方，你可能想使用sibling selector目標元素.b。只要你的最後聲明塊更改爲：

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

這裏是一個updated Codepen。

希望這會有所幫助！如果您有任何問題，請告訴我。