Как показать изображение при наведении на другое изображение в другом div

Question

Моя цель состоит в том, чтобы показать image Manager-icon.png в #watch #background #manager #logo при парящем изображении blue-pointer.jpg в #watch #background #manager #logo.

Мой HTML и CSS приведены ниже:

<div id="watch"> 
<div id="background"> 
    <img src="image/watch.jpg" height=100%> 
    <div id="manager"> 
     <div id="pointer"> 
      <a href="login.html"> 
       <img src="Image/blue-pointer.jpg" width=100%> 
      </a> 
     </div>    
     <div id="logo"> 
      <img src="Image/Manager-icon.png" width=100%>   
     </div> 
    </div> 
</div> 

#watch #background #manager #pointer{ 
    position: absolute; 
    width: 100%; 
    left: 28%; 
    top: 79%; 
} 
#watch #background #manager #pointer img:hover + #watch #background #manager #logo img{ 
    display: inline; 
} 

#watch #background #manager #logo{ 
    position: absolute; 
    width: 100%; 
    top:35%; 
} 

#watch #background #manager #logo img{ 
    display: none; 
} 

Answer 1

+ знак относится к братьям и сестрам так, поскольку #pointer img даже не близко к собрату к #logo img, ничего не происходит. Предполагая, что только содержание #pointer a есть образ и только содержимое #pointer является якорем, вы можете сделать свой CSS, как это:

#pointer:hover + #logo img { 
    display: inline; 
} 

Обратите внимание, одно: Вам не нужно писать это целое цепь Ид. ID должен быть уникальным на всей веб-странице, поэтому достаточно упомянуть его в CSS. Вам не придется писать эту

#watch #background #manager #pointer { 
    ... 
} 

Это достаточно подробно

#pointer { 
    ... 
}