0

我目前有一个下拉式导航结构构建和工作。我正在尝试通过添加以下元素来扩展导航：

当前工作： 1. 当悬停在“li”链接上时，与列表相邻的 div 容器显示与链接相关的内容。2.“li”和child“div”背景颜色改变为容器的宽度。 3.当鼠标悬停在链接/div区域时出现容器“.servBox”。

问题：我希望能够将鼠标悬停在“servBox”上而不隐藏它。

这是我目前拥有的......

http://jsfiddle.net/Robbo/mTNJf/

jQuery(".flyout").on('hover', function(){
var num = $(this).data('contentid');
jQuery('#serv-hover-' + num).toggle();
});

.megamenu .col_2,
.megamenu .col_3 {
float: left;
display:inline;
position: relative;
margin-left: 15px;
margin-right: 15px;
}
.megamenu .col_2 {width:149px}
.megamenu .col_3 {width:210px;}
.mm-level-1 ul {}
li.flyout { margin:0; padding: 0;display:block}
li.flyout > div:hover {background-color: #ff0000;margin-right:-100px;padding-right:50px;}

.servBox {
display: none;
top: -1px;
background: #ff0000;
min-height: 230px;
width: 230px;
}

<div class="megamenu">
<div class="col_2">
    <ul class="mm-level-1">
        <li class="flyout" data-contentid="as-1"><div><a href="#">Link 1</a></div></li>
        <li class="flyout" data-contentid="as-2"><div><a href="#">Link 2</a></div></li>
    </ul>
</div>
<div class="col_3">
    <div id="serv-hover-as-1" class="servBox" style="display:none;">Content 1</div>
    <div id="serv-hover-as-2" class="servBox" style="display:none;">Content 2</div>
</div>

提前致谢。

4

2 回答 2

0

这样的事情怎么样

jQuery

$(".flyout").hover(
                function(){
                    var num = $(this).data('contentid');
                    $('#serv-hover-' + num).show();
                    $(this).addClass("active");
                },
                 function(){
                     /*on moiuseleave, do nothing*/
                 });
$(".servBox").hover(
                function(){
                     /*on moiuseenter, do nothing*/
                },
                 function(){
                    $(this).hide();
                     $(".flyout").removeClass("active");
                 });

附加 CSS

li.active,
li.flyout > div:hover {
   background-color: #ff0000;
   margin-right:-100px;
   padding-right:50px;
}

http://jsfiddle.net/daCrosby/rn6e5/

编辑

您可以创建一个函数来停用 servBox 并随时调用它 - 例如，在悬停函数中设置活动状态之前。

function hideServBox(){
    $(".servBox").hide();
    $(".flyout").removeClass("active");
}

http://jsfiddle.net/daCrosby/rn6e5/1/

此外，

当鼠标离开导航栏区域时，要使这些框也消失，只需在悬停的第二个功能上运行该hideServBox.megamenu功能。或者，像这样组合它们：

$(".servBox, .megamenu").mouseleave(
                function(){
                     hideServBox();
                 });

http://jsfiddle.net/daCrosby/rn6e5/3/

于 2013-02-06T22:53:37.270 回答
0

使用以下代码：

    jQuery(".flyout").on('hover', function(){
var num = $(this).data('contentid');
jQuery(".servBox").hide();
jQuery('#serv-hover-' + num).show();

});

这只是一个快速修复。也可能有更好的方法。

于 2013-02-06T21:56:29.230 回答