3

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

弹出和鼠标悬停元素效果很好。我唯一不知道该怎么做的就是在弹出的元素中创建多个列。当我尝试在其中添加另一个 div 说，作为第二列向右浮动时，它会创建更多弹出窗口。有没有办法将 div 嵌套在这样样式的元素中？

编辑小提琴：http: //jsfiddle.net/7ZE8q/6/

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>
4

2 回答 2

2

你应该做的是这样的：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; }
  1. 弹出窗口本身具有黑色背景。
  2. 弹出窗口内有 3 个主要列，背景为红色、绿色和黄色。
  3. 每列内部都有子列，背景为蓝色和灰色。

你不需要任何 JS……只需要 HTML 和 CSS，带有 :hover 和 display: inline-block;

希望能帮助到你！

于 2013-03-25T00:51:39.287 回答
2

这是我的解决方案：它在 JSFiddle Form中。希望这可以帮助。我使用引导程序来帮助添加一些基本样式，但重要的部分不是使用引导程序，而是使用的 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

于 2013-03-25T01:02:19.637 回答