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>

所以基本上我想在一个完全不同的div中显示.textAppear而不是#behind。甚至可以使用html / css吗？

这是我使用的CSS，但它在#behind内显示.TextAppear。

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
}

修改

两种不同的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'; };

Answer 2

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

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

悬停在div上并显示另一个

2 个答案: