悬停在一个 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>

所以基本上我想在与 #behind 完全不同的 div 中显示 .textAppear。 html/css 也可以吗？

这是我使用过但正在显示的CSS。文本出现在#behind内。

CSS：

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

Answer 1

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

查看演示 http://jsfiddle.net/nadeemmnn2007/gm7dafh7/

Answer 2

您走在正确的道路上。 您只需指定 textAppear 元素应在“:hover”上可见。

JSbin：http://jsbin.com/guhazifope/1/edit?html,css,输出

CSS：

.textAppear {
  display:none
}

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

编辑：

两种不同的 JS 解决方案。

jQuery：

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

香草：

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

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

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