Наведите указатель мыши на div и отобразите еще один

Question

Я хочу показать элемент p, когда нахожусь над footer-green. Дело в том, что я не могу понять, как отобразить его в совершенно разных div. В моем css я использовал .footer-green + .textAppear{}, но это, кажется, отображает его только внутри родителя div. Любые рекомендации, как это решить? Обратите внимание, что я очень много начинаю с кодированием.

HTML:

<div class="section active" id="section2"> 

     <div id="behind"> 
      <img src=" 02_Rechtwijzer-Dialoog_JvD01---web.gif" width="512" height="700" /> 
      <div class="footer-green"></div> 
      <div class="process-green"></div> 
      <div class="chat-red"></div> 
      <div class="leftNavBox-red"></div> 
      <div class="rightNavBox1-red"></div> 
      <div class="rightNavBox2-red"></div> 
      <div class="rightNavBox3-red"></div> 
      <div class="dialogueBox1"></div> 
      <div class="dialogueBox2"></div> 

     </div> 
     <div class="next"> 
     <p class="textAppear">I'm invisible until you hover !</p> 
     </div>  

    </div> 

Поэтому в основном я хочу, чтобы отобразить .textAppear в совершенно иной, чем DIV #behind. Возможно ли это с помощью html/css?

Вот CSS, который я использовал, но он показывает .TextAppear внутри #behind.

CSS:

.footer-green:hover + .textAppear { 
    text-align:left; 
    display:inline-block; 
} 

Answer 1

Вы находитесь на правильном пути. Вам просто нужно указать, что элемент textAppear должен быть виден на «: hover».

JSbin: http://jsbin.com/guhazifope/1/edit?html,css,output

CSS:

.textAppear { 
    display:none 
} 

.footer-green:hover + .textAppear { 
    display:block 
} 

EDIT:

два решения JS.

JQuery:

$('.trigger') 
    .on('mouseover',function(){ 
    $('.target').show(); 
    }) 
    .on('mouseout',function(){ 
    $('.target').hide(); 
    }); 

Vanilla:

var trigger = document.querySelector(".trigger"); 

trigger.onmouseover = function(){ 
    document.querySelector(".target").style.display = 'block'; 
}; 

trigger.onmouseout = function(){ 
    document.querySelector(".target").style.display = 'none'; 
}; 

Answer 2

$('.footer-green').on("mouseover",function(){ ; 
    $('.textAppear').show(); 
}); 
$('.footer-green').on("mouseout",function(){ 
    $('.textAppear').hide(); 
}); 

Смотрите демо- http://jsfiddle.net/nadeemmnn2007/gm7dafh7/