Question

当您将鼠标悬停在“工作”链接上时，我正试图模仿此网站上的弹出框：http://zooadvertising.com.au/

弹出窗口和鼠标悬停元素非常有用。我唯一无法弄清楚如何做的是在弹出元素中创建多个列。当我尝试在其中添加另一个div来表示，向右浮动作为第二列时，它会创建更多的弹出窗口。有没有办法在一个像这样的元素中嵌套div？

CSS：

<style type="text/css" title="">
.NameHighlights {
position:relative;
}
.NameHighlights div {
display: none;
}
.NameHighlightsHover {
position:relative;
}
.NameHighlightsHover div {
display:block;
position:absolute;
width: 400px;
height: 300px;
top:30px;
left:-300px;
z-index:1000;
background-color: #000000;
padding: 15px;
font-size: 14px;
color: white;
}
</style>

Answer 1

你应该做的是这样的事：http://jsfiddle.net/8X3uj/1/

HTML：

<div class="top_bar">
  <span>Work
    <div class="popup">
      <div class="column" style="background-color: red;">
        <div class="left_column"></div>
        <div class="right_column"></div>
      </div>
      <div class="column" style="background-color: green;">
        <div class="left_column"></div>
        <div class="right_column"></div>
      </div>
      <div class="column" style="background-color: yellow;">
        <div class="left_column"></div>
        <div class="right_column"></div>
      </div>
    </div>
  </span>
</div>

CSS：

.top_bar{ background-color: lightgreen; }
.popup{ background-color: black; height: 500px; display: none; font-size: 0px; }
.popup:hover{ display: block; text-align: center; }
.top_bar > span:hover > div{ display: block; }
.column{ height: 400px; width: 33%; display: inline-block; margin: 0px 1px; }
.column > div{ width: 50%; height: 300px; display: inline-block; }
.column > div:first-child{ background-color: dodgerblue; }
.column > div:last-child{  background-color: gray; }

弹出窗口本身有黑色背景。
弹出窗口内有3个主要栏目，背景为红色，绿色和黄色。
每列中都有子列，背景为蓝色和灰色。

你不需要任何JS ......只需要HTML和CSS，其中：hover和display：inline-block;

希望它有所帮助！

Answer 2

这是我的解决方案：It's in JSFiddle Form。希望这可以帮助。我使用bootstrap来帮助添加一些基本样式，但重要的部分是不使用bootstrap，它是使用的jquery：

$(document).ready(function(){

        $('.nav3Hov').hide();
        $('#nav3').on('mouseover', function(){
            $('.nav3Hov').stop(true,true).fadeIn(200);
        }).on('mouseleave', function(){
            $('.nav3Hov').stop(true).delay(200).fadeOut(200);
        });      
        $('.nav3Hov').on('mouseenter', function(){
            $(this).stop(true).clearQueue().show();
        }).on('mouseleave', function() {
            $(this).delay(200).fadeOut(200);
        });
});

修改顺便说一句，抱歉没有使用你提供的jsfiddle。在你添加它之前我开始回答了！：P

模拟CSS弹出框

2 个答案: