个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试创建一个 JavaScript(最好不是 jQuery)网站菜单，当每个菜单项悬停在其上方时，该菜单会下拉子链接的下拉菜单。我几乎让它完全发挥作用，但我遇到了一些困难，无法在网上找到解决方案。
在菜单按钮上，我有一个 onmouseover 事件，用于显示子链接面板并为其设置动画。如果您将鼠标移出/移到另一个菜单按钮上，该面板将消失，如果您将鼠标悬停在另一个菜单按钮上，则会出现一个新面板。问题是，当您将鼠标从所需的菜单按钮移到相应的面板上时，它就会消失，显然是因为菜单按钮上有一个 onmouseout 事件来执行此操作!我需要按钮上的 onmouseout，但是当鼠标移到面板上时如何防止它触发隐藏功能？
我试图想出解决这个问题的方法，但到目前为止我还没有成功，因此我们将不胜感激任何帮助!
谢谢
安迪
<script type="text/javascript">
var anim = new Animator();
function Animator() {
this.slideDown = function (element, height) {
var e = document.getElementById(element);
var counter = 0;
e.style.display = 'block';
var interval = window.setInterval(function () {
counter += 2;
e.style.height = counter + 'px';
if (counter >= height) {
clearInterval(interval);
}
}, 1);
};
this.hideSlide = function (element) {
var e = document.getElementById(element);
e.style.display = 'none';
e.style.height = 0 + 'px';
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divMenuBar">
<div class="menuButton" onmouseover="anim.slideDown('divMenu1', 305);" onmouseout="anim.hideSlide('divMenu1');">Click Me</div>
<div id="divMenu1" class="slidingMenu menu1">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li class="end">Option 6</li>
</ul>
</div>
<div class="menuButton" onmouseover="anim.slideDown('divMenu2', 305);" onmouseout="anim.hideSlide('divMenu2');">Click Me</div>
<div id="divMenu2" class="slidingMenu menu2">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li class="end">Option 6</li>
</ul>
</div>
<div class="menuButton" onmouseover="anim.slideDown('divMenu3', 305);" onmouseout="anim.hideSlide('divMenu3');">Click Me</div>
<div id="divMenu3" class="slidingMenu menu3">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li class="end">Option 6</li>
</ul>
</div>
<div class="menuButton" onmouseover="anim.slideDown('divMenu4', 305);" onmouseout="anim.hideSlide('divMenu4');">Click Me</div>
<div id="divMenu4" class="slidingMenu menu4">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li class="end">Option 6</li>
</ul>
</div>
</div>
</form>
最佳答案
我确信您有不想使用 jQuery(或其他 UI 框架)的原因，所以我不会提出这个问题。但一般来说，您必须编写类似于这些框架执行菜单的代码。
您不需要像现在一样盲目地隐藏鼠标悬停时的元素，而是需要构建逻辑来查看鼠标现在位于什么位置，如果它位于子面板上，则需要保持面板可见性。如果您开始进入子菜单，这可能会变得相当棘手。
但是无论你怎么写，天下没有免费的午餐。您的按钮和菜单面板需要了解彼此以及它们之间的关系。您必须明确决定隐藏和显示什么以及何时隐藏和显示什么。
关于JavaScript 菜单 onmouseout 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14566772/
25
4
0
我有这个脚本: $(document).ready(function(){ $('.infoLink').hover(function(){ $('.s
我有一个图像，当用户将鼠标悬停在图像上时，该图像会更改为新图像。单击新图像后，就会播放音频文件。当用户鼠标移出图像时，图像将恢复为默认图像。问题是音频仍在播放。我不太擅长js，当用户鼠标移出时如何让音
在尝试根据以下教程实现下拉菜单时，我遇到了一个奇怪的问题:http://www.webchief.co.uk/blog/simple-jquery-dropdown-menu/index.php当我的
所以我有一个带有 3 个圆圈的导航和一个 jquery slider 。 默认情况下，第一个圆圈点亮，当用户点击第二个圆圈时， slider 移动到第二个 div，然后那个圆圈点亮，第一个圆圈变暗。这
如何在 onmouseout 时关闭组合框？ Volvo Saab Mercedes Audi 最佳答案 你不能(可靠地)做到这一点。出现的弹出窗口无法以编程方式进行操作，即打开或关闭，其
因此，当您将鼠标悬停在 article 元素上时，这段代码会播放一段音频。问题是当鼠标悬停在子元素上时它会停止。当鼠标悬停在一般 article 元素上并悬停在子元素上时，如何使 Stopsound
我正在尝试显示/隐藏按钮中的一些 文本。按钮是 S.O.S javascript代码是 function show() { sos_left=docu
所以这是一个非常简单的问题，但研究它，我只能找到更复杂情况的答案。这是我的: 我在母版页上有一张图片，当您将鼠标悬停在它上面时，它下方会显示一个面板(主要使用 css)并且该面板中有链接。因为母版页相
我目前正在将我网站的菜单从纯 JavaScript 切换到 jQuery。我的菜单有滚动效果。 菜单有一个外包装，其中设置了一个 onmouseout 事件。如果触发，则检查 relatedTarge
我正试图将鼠标悬停在上面以调出一个菜单。我的 javascript 工作得有点正确。当我将鼠标悬停在链接或菜单上时，菜单保持显示状态。但是，当我鼠标移出时，我遇到了问题。我的菜单 div 按原样消失了
在 Javascript 中，我希望 onmouseout 事件在生效之前休眠/暂停/等待/(不确定这里的术语是否正确)三秒钟。这是如何实现的？ 谢谢 最佳答案 function outfunctio
我有一个悬停元素，当用户将鼠标悬停在它上面时，将从隐藏元素中获取文本，当它悬停时，它将重新分配其先前的值。 我的 html 有点像这样。 Hover Here Lorem ipsum dolor
基本上我将翻转从我的 css 转换为 javascript。我还选择了其中一张页面加载后要选择的图片。但是我在处理 onMouseOut 事件时遇到了麻烦。除了那张照片，一切都很完美。当我将鼠标悬停在
我有一个 iframe #viewer 和一个出现在其上方的绝对定位元素 #appear_above_viewer。我希望 #appear_above_viewer 在鼠标经过 #viewer 时淡入
我有这个 html: 这个 javascript 函数: function pinkImg(x) { x.innerHTML = ''; } function
在我们所有的页面上，顶部都会显示一条重要消息。页面加载时，该消息看起来像浅灰色背景下的纯红色文本(与页面的其余部分相同)。如果用户想要更新它，他们可以单击它并调用 editMsg 函数，这使得它看起来
我有一个要求，我必须根据 mouseover 和 mouseout 事件显示替代元素。 默认元素是一个超链接(它会一直显示，除了在鼠标悬停时)，备用元素是一个下拉列表元素(它应该在超链接的鼠标悬停时显
我试图弄清楚如何清除 JavaScript onmouseleave 事件上特定 HTML ID 的内容。我的 onmouseover 工作得很好，但 onmouseout 却不行。 这是一个导航栏(
这是它不起作用的部分: function showDetailedView(element) { var img = document.getElementById(element); img
我一直在尝试做的是我有一个框，其中显然包含文本，我希望每当它悬停时，删除当前内容并添加另一个内容，当它悬停时，取回旧的。正如您所意识到的那样，我的尝试进行得并不顺利，我想知道什么是 exacy 问题。
我是一名优秀的程序员,十分优秀！