如何正确实现这个 jquery 示例。悬停时显示/隐藏 Div、导航

发布于 2024-11-29 02:26:04 字数 2330 浏览 0 评论 0原文

我正在尝试执行此已回答问题的说明 Jquery 在悬停时显示 div，然后当用户将鼠标悬停在 div 之外时隐藏它有帮助吗？然后添加更多功能。这是我将问题和答案代码组合成的内容：

$(document).ready(function(){
//when user hovers over plans the mainnavbottom is shown
    $(".plans").hover(
    $('.mainnavbottom').bind('mouseenter mouseleave', function(event) {
        switch(event.type) {
            case 'mouseenter':
               // when user enters the div
               $(".mainnavbottom").show("fast");
            break;
            case 'mouseleave':
              // leaves
              $(".mainnavbottom").hide("slow");
            break;
        }
    });

 });

我无法让它工作。我确信这是因为我是一个 javascript n00b，所以任何建议将不胜感激。

我也尝试过 jQuery mouseIntent 插件在父级悬停时显示/隐藏 div，但在悬停时继续显示但再次没有乐趣。

也许我将答案代码错误地添加到了头部？以我引用的两个例子为例，有人可以向我展示头部的完整 javascript 代码吗？我觉得我在这里犯了一个简单的错误。

假设我可以让它发挥作用，我想为其添加另一个维度。一旦上述代码中的 div“出现”，它就会包含多个链接，然后用户可以将鼠标悬停在每个“按钮”上并查看更多信息（文本和可能的图像）。我想要那个文字&如果可能的话，图像应成为链接的可点击部分，但没有它也可能存在。

可能一旦我让上面的代码工作，我就可以将相同的概念应用于辅助悬停，但我不确定，因为我对上面的代码没有成功。有人能发现我的（可能是明显的）错误吗？我提到的附加功能听起来是否会成为一个问题。

预先感谢您对此提供的任何帮助。

编辑 - 有人要求我发布所有代码

    <html>
<head>
<script src="jquery.js"></script>
<script language="Javascript">
$(document).ready(function(){
//when user hovers over plans the mainnavbottom is shown
    $("#plans").hover(
    $('#mainnavbottom').bind('mouseenter mouseleave', function(event) {
        switch(event.type) {
            case 'mouseenter':
               // when user enters the div
               $("#mainnavbottom").show("fast");
            break;
            case 'mouseleave':
              // leaves
              $("#mainnavbottom").hide("slow");
            break;
        }
    });

 });
</script>
</head>

<body>
       <div id="plans"> // some stuff </div>
       <div id="mainnavbottom"> 
          // some other stuff that I want to 
          // keep showing if users hover over it 
       </div>
</body>
</html>

原文

I'm trying to implement the instructions from this answered question Jquery show div on hover then when user hovers out of div hide it help? and then add a bit more functionality. Here is what I combined the question and answer code into:

$(document).ready(function(){
//when user hovers over plans the mainnavbottom is shown
    $(".plans").hover(
    $('.mainnavbottom').bind('mouseenter mouseleave', function(event) {
        switch(event.type) {
            case 'mouseenter':
               // when user enters the div
               $(".mainnavbottom").show("fast");
            break;
            case 'mouseleave':
              // leaves
              $(".mainnavbottom").hide("slow");
            break;
        }
    });

 });

I can't get it to work. I'm sure it's because I am a javascript n00b so any suggestions would be appreciated.

I've also tried jQuery hoverIntent Plugin show / hide div on parent hover, but keep showing when hovered but again no joy.

Perhaps I'm adding the answer code incorrectly to the head? Taking the two examples I cited can anyone show me the full javascript code for the head? I feel like I am making a simple mistake here.

Assuming I can get that to work I would like to add one other dimension to it. Once the div from the above code "appears" it contains several more links, the user can then hover each of those "buttons" and see more info (text and possibly image). I would like that text & image to be a clickable part of the link if possible, but could probably live without it.

It may be that once I get the above code working I can just apply the same concepts to the secondary hover, but I'm not sure since I've been unsuccessful with the above code. Can anyone spot my (probably obvious) error? And does the added functionality I mentioned sound like it will be a problem.

Thanks in advance for any help with this.

Edit - Someone asked for me to post all code

    <html>
<head>
<script src="jquery.js"></script>
<script language="Javascript">
$(document).ready(function(){
//when user hovers over plans the mainnavbottom is shown
    $("#plans").hover(
    $('#mainnavbottom').bind('mouseenter mouseleave', function(event) {
        switch(event.type) {
            case 'mouseenter':
               // when user enters the div
               $("#mainnavbottom").show("fast");
            break;
            case 'mouseleave':
              // leaves
              $("#mainnavbottom").hide("slow");
            break;
        }
    });

 });
</script>
</head>

<body>
       <div id="plans"> // some stuff </div>
       <div id="mainnavbottom"> 
          // some other stuff that I want to 
          // keep showing if users hover over it 
       </div>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不美如何 2024-12-06 02:26:04

根据我的经验，jquery 不擅长处理对象类。我会尝试将所有 (".mainnavbottom") 更改为 ("#mainnavbottom") 并确保相关 div 具有 id="mainnavbottom"。

编辑：同样的事情也适用于 (".plans")

回复收藏 0 原文

旧时光的容颜 2024-12-06 02:26:04

请参阅下面的编辑：

可以更好地这样写（请原谅格式，我在我的 iTouch 上）：

$(function(){
    $(".plans").hover(function(){
               $(".mainnavbottom").show("fast");
},function(){
              $(".mainnavbottom").hide("slow");
 });
});

||编辑||

保持主导航底部可见是很困难的。我个人会选择使用 CSS 样式和 :hover 值而不是使用 jQuery。不过，我希望这对你有用。我必须设置变量，并测试鼠标是否悬停在计划或 mainnavbottom div 上。我需要在 mainnavbottom 上使用 .mouseleave() 函数。这是我使用的jsFiddle，下面是相关代码：

var nav = $('#mainnavbottom');
var plans = $('#plans');
    plans.mouseover(function(){     
        nav.show("fast");
    }).mouseout(function(){
        if(nav.is(':hover')){
            nav.mouseleave(function(){
                if(plans.is(':hover')){
                    return;
                        }else{
                                     nav.hide('slow');
                        }
            });
        }else{
         nav.hide('slow');
        }
    });

See edit below:

Could be better written like this (excuse the formatting, I'm on my iTouch):

$(function(){
    $(".plans").hover(function(){
               $(".mainnavbottom").show("fast");
},function(){
              $(".mainnavbottom").hide("slow");
 });
});

|| EDIT ||

It's tricky to keep the mainnavbottom visible. I personally would opt to use CSS styles and the :hover value instead of using jQuery. However, I hope this works for you. I had to set variables, and test whether the mouse was hovering over the plans or the mainnavbottom div. I needed to use the .mouseleave() function on the mainnavbottom. Here's the jsFiddle that I used, and below is the relevant code:

var nav = $('#mainnavbottom');
var plans = $('#plans');
    plans.mouseover(function(){     
        nav.show("fast");
    }).mouseout(function(){
        if(nav.is(':hover')){
            nav.mouseleave(function(){
                if(plans.is(':hover')){
                    return;
                        }else{
                                     nav.hide('slow');
                        }
            });
        }else{
         nav.hide('slow');
        }
    });

回复收藏 0 原文

小霸王臭丫头 2024-12-06 02:26:04

你的牙套被拧得很糟糕。

.mouseenter &不需要 mouseleave，因为 .hover() 会为您完成此操作。

这就是我想到的（出于某种原因它不喜欢在 doc.ready 中，但我的时间有限来研究它）

（仅供参考，您的代码（和我建议的修复）的编写方式，“# mainnavbottom”最初不会被隐藏。它只有在你第一次将鼠标悬停在它上面后才会被隐藏 - 但我离题了..）

$("#plans").hover(
    function() {
        $("#mainnavbottom").show("fast");
    },
    function() {
       $("#mainnavbottom").hide("slow");
    }
);

这是一个小提琴。

http://jsfiddle.net/KevinGabbert/pcJt8/

但是，如果您仍然< /em> 想要这些事件，你的例子中的大括号仍然混乱，这是我对你想做的事情的最好尝试。（基本上，我使你所做的事情合法化。我知道有时我需要可视化，所以我会去那里。）

但同样，这不是好的代码，因为它可能会发生一些邪恶的疯狂事件......

（不要在家里尝试这个）

 $("#plans").hover(
        function() {
            alert("hover");

            $('#mainnavbottom').bind('mouseenter mouseleave', function() {
                //yada yada

            });
        },
        function() {
            alert("unhover");

            $('#mainnavbottom').bind('mouseenter mouseleave', function() {
                 //yada yada
            }); 
        }
    );

另外，详细说明 Artur 上面所说的：你想使用 id“#plans”而不是类“.plans”的原因是因为只有 1 个 id一页。 JQuery的遍历找到后就会停止。

当使用类选择器“.plans”时，它会遍历整个页面来查找该类的所有元素，如果您有一个大或复杂的页面，这可能会造成混乱，并使调试变得更加困难。

Your braces are screwed something awful.

.mouseenter & mouseleave is not needed, as .hover() does this for you.

This is what I came up with (for some reason it doesn't like being in doc.ready, but I have limited time to look into that)

(FYI, the way your code (and my suggested fix) is written, "#mainnavbottom" won't be hidden originally. It only gets hidden after you hover over it for the first time - but I digress..)

$("#plans").hover(
    function() {
        $("#mainnavbottom").show("fast");
    },
    function() {
       $("#mainnavbottom").hide("slow");
    }
);

Here's a fiddle for that.

http://jsfiddle.net/KevinGabbert/pcJt8/

If, however, you still wanted those events, the braces in your example were still messed up, and this is my best attempt at what you were trying to do. (basically, I made what you did legal. I know that sometimes I need a visualization, so I'll go there.)

but again, this is not good code as it likely has some wicked event craziness going on..

(don't try this at home)

 $("#plans").hover(
        function() {
            alert("hover");

            $('#mainnavbottom').bind('mouseenter mouseleave', function() {
                //yada yada

            });
        },
        function() {
            alert("unhover");

            $('#mainnavbottom').bind('mouseenter mouseleave', function() {
                 //yada yada
            }); 
        }
    );

also, elaborating on what Artur said above: the reason you want to use the id "#plans" instead of the class ".plans" is because there is only 1 id on a page. JQuery's traversal will stop after finding it.

When using the class selector ".plans", it traverses the entire page looking for ALL elements of that class, which can confuse things if you have a large or complicated page, and make debugging harder.

回复收藏 0 原文

饭团 2024-12-06 02:26:04

    $("#plans").hover(
      function() {
        $("#mainnavbottom").show("fast");               
        $('#mainnavbottom').bind('mouseenter mouseleave', function(event) {
          switch(event.type) {
            case 'mouseenter':
              // when user enters the div
              $("#mainnavbottom").show("fast");
            break;
           case 'mouseleave':
             // leaves
             $("#mainnavbottom").hide("slow");
           break;
          }
        });
      },
      function() {
        $("#mainnavbottom").hide("slow");               
        $('#mainnavbottom).bind('mouseenter mouseleave', function(event) {
          switch(event.type) {
            case 'mouseenter':
              $("#mainnavbottom").show("fast");
            break;
            case 'mouseleave':
              $("#mainnavbottom").hide("slow");
            break;
          }
         }); 
       }
     );

    $("#plans").hover(
      function() {
        $("#mainnavbottom").show("fast");               
        $('#mainnavbottom').bind('mouseenter mouseleave', function(event) {
          switch(event.type) {
            case 'mouseenter':
              // when user enters the div
              $("#mainnavbottom").show("fast");
            break;
           case 'mouseleave':
             // leaves
             $("#mainnavbottom").hide("slow");
           break;
          }
        });
      },
      function() {
        $("#mainnavbottom").hide("slow");               
        $('#mainnavbottom).bind('mouseenter mouseleave', function(event) {
          switch(event.type) {
            case 'mouseenter':
              $("#mainnavbottom").show("fast");
            break;
            case 'mouseleave':
              $("#mainnavbottom").hide("slow");
            break;
          }
         }); 
       }
     );

回复收藏 0 原文

~没有更多了~