Question

这不是菜单，更像是一个标签，我使用jQuery在标签上盘旋时切换标签主体内容，我遇到的问题是，我似乎无法保持标签可见点击在标签内容正文上的链接上。

到目前为止我所做的事情可以在http://codepen.io/anon/pen/gvKqC

看到

 $j("#callouts>li>a").hover(function(){
 $j('.callout-content').hide();
 $j(this).next('.callout-content').css('display','block');
 });

 $j('.callout-content').mouseleave(function () {
 $j('.callout-content').hide();
 });

我也尝试了这个，这确实解决了问题，但是当鼠标从标签移开时，标签内容不会消失。

Answer 1

DEMO

试试这个

var $j = jQuery.noConflict();
$j("#callouts>li>a").hover(function(){

  $j('#callouts .callout-content').css('display','none');

  $j(this).next('#callouts .callout-content').css('display','block');
});


$j('.callout-content').mouseleave(function () {
   $j('#callouts .callout-content').css('display','none');
 });

而不是：

     var $j = jQuery.noConflict();
$j("#callouts>li>a").hover(function(){
  $j(this).next('#callouts .callout-content').css('display','block');
}).mouseleave(function(){
  $j(this).next('#callouts .callout-content').css('display','none');
});

Answer 2

尝试相对于嵌套在其中的li的菜单位置，然后使用jquery添加一个可以用CSS调用的类来显示菜单。这样，当你翻看菜单时，你总会徘徊在li。

以下是原始代码的工作分支：http://codepen.io/anon/pen/nJbyI

jquery在悬停时保持div可见

2 个答案: