jquery - 带有 anchor 和相应 div 的鼠标悬停效果

标签 jquery css jquery-ui

$(document).ready(function(){
$("a").mouseover(function(){
var currentId = $(this).attr('id')+"S";
$(".stay:visible").hide("explode",[],200);
$("#" + currentId).show("bounce");
});
});

.stay { 
display:none;
      }
<body>
<div id="parent">
  <a id="aaa"></a>
  <a id="bbb"></a>
  <a id="ccc"></a>
  <div id="holder">
     <div class="stay" style="display:inline"></div><!--Starting Div, leaving on first mouseover-->
     <div class="stay" id="aaaS"></div>
     <div class="stay" id="bbbS"></div>
     <div class="stay" id="cccS"></div>
  </div>
</div>
</body>

我有我的 anchor 和每个 anchor 对应的 div 以及一个共享类 =“停留”。 div 开始时是隐藏的,当鼠标悬停在相应的 anchor 上时,我希望它们显示在 holder div 中。 div 包含一个图像,当我拥有所有单独脚本的快速鼠标时,将导致所有 div 堆叠在页面下方。尝试 .stop() 和 .clearqueue() 无济于事,所以我想尝试一个捕获所有过程。问题是它无法将 anchor 识别为我要获取其 ID 的元素。我真的很了解这一点,因此我们将不胜感激。 编辑 - 我现在选择了 div,但如果我将鼠标悬停在 anchor 上的速度过快,它们仍在页面下方堆叠。

最佳答案

最终使用了 hoverIntent对结果 super 满意。

关于jquery - 带有 anchor 和相应 div 的鼠标悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11142306/

相关文章:

javascript - JQuery 可拖动堆栈在放置后中断

javascript - HTML DOM 节点丢失事件

jquery ajax 未正确捕获 c# 异常

javascript - 为动态生成的图像添加值,然后在单击时显示

javascript - 为什么我的 angularJS 在我的示例网站上不起作用?

JQuery...调整网格偏移中拖动

在html中调用JQuery自定义函数?

javascript - 如何在chrome右键菜单中添加 "open link in app mode"?

html - CSS/HTML - 背景图片不工作

javascript - 在 PHP 循环中动态创建 jQuery listview