jQuery技术:jQueryhover(show-hide)

我使用show / hide在jQuery中使用弹出菜单。 我想为我的例子做一个绿色矩形clikable。

示例: http : //jsfiddle.net/Q5cRU/27/

$(document).ready(function(){ $('.rectangle1').hide(); $('#rectangle').hover(function() { $('.rectangle1').show() },function() { $('.rectangle1').hide() }); }); 

    .rectangle1里面使用一个区域:

     

    在此区域添加顶部填充。 所以你的领域将是无缝的。 你也可以添加一个display:none;.rectangle1而不是将其隐藏在JavaScript中。

     .rectangle1 { width: 140px; padding-top: 10px; display: none; } .rectangle1-area { width: 100%; height: 150px; background: #37CA90; } 

    使用计数变量。 因此,如果您的鼠标位于#rectangle.rectangle1var为1 。 如果mouseout – var为0 => hide .rectangle1

     $(document).ready(function(){ var count = 0; $('#rectangle, .rectangle1').mouseenter(function() { count++; $('.rectangle1').show(); }); $('#rectangle, .rectangle1').mouseleave(function() { count--; if (count == 0) { $('.rectangle1').hide(); } }); }); 

    在这里演示。

    您可以通过在第一个函数中切换它并在第二个函数中不执行任何操作来尝试这样的事情。 重要的是不要离开第二个函数,因为如果它离开,第一个函数将取代它,我们就会遇到问题的开始。

     $(document).ready(function () { $('.rectangle1').hide(); $('#rectangle').hover(function () { $('.rectangle1').toggle(); }, function () { // leave it empty }); }); 

    DEMO

    您将无法单击弹出窗口,因为只要您的鼠标没有hover在蓝色矩形上,另一个矩形就会消失。

    为了使其成为可能,您必须使两个矩形彼此相邻,并且当您将鼠标hover在其上时使第二个矩形也显示,或者在单击第一个矩形时隐藏/hover。 然后你就可以点击使用了

     $("#ID_OF_RECTANGLE_TWO").click(function(){DO_SOMETHING_HERE;}); 

      以上就是jQuery教程分享jQueryhover(show-hide)相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

      ctvol管理联系方式QQ:251552304

      本文章地址:https://www.ctvol.com/jquerytutorial/558397.html

      (0)
      上一篇 2021年1月26日
      下一篇 2021年1月26日

      精彩推荐