导航下拉菜单出现圆角问题
我已经在此处看到了以下导航下拉菜单。
它可以工作并且几乎完成,但我有一个问题。当您将鼠标悬停在导航标题上时,文本会从彩色变为黑色,然后显示下拉列表。这就是它应该如何工作,但是当您移动鼠标进入下拉列表中的导航标题时,黑色文本(活动图像)将恢复为彩色并且不会保持黑色。
当下拉菜单处于活动状态并且用户正在浏览此类菜单以使文本(活动图像)保持黑色时,有什么建议吗?
I have worked on the following nav drop down seen here.
It works and is almost complete, but I have one issue. When you mouseover a nav title the text goes from color to black and then shows the dropdown. That is how it should work, but when you move your mouse to go a nav title within the dropdown the black text(active image) goes back to color and doesnt remain black.
Any suggestion when dropdown is active and user is navigating through such to keep the text(active image) black?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
理想情况下,您将使用文本而不是图像作为菜单项。然后,您可以非常轻松地使用 CSS 来控制将鼠标悬停在
上时的文本颜色,而根本不需要 JavaScript。
按照您现在的方式(使用图像),我相信通过将 onmouseover 和 onmouseout 从
移动到
仍然是可能的> 上面。它可能需要对脚本进行一些调整才能工作,但希望您了解这个概念:检测将鼠标悬停在整个列表项(及其内容)上,而不是仅在该列表项中的锚标记上。
Ideally, you would be using text rather than images for the menu items. Then, you could very easily use CSS to control the text colors on hover over the
<li>
without any need for JavaScript at all.With the way you're doing it now (with images), I believe it's still possible by moving your onmouseover and onmouseout from the
<a>
to the<li>
above it. It may require some tweaking of the scripts for this to work, but hopefully you get the concept: detect hovering over the entire list item (and its contents) rather than on just the anchor tag within that list item.如何将菜单项及其下拉列表放入一个展开以包含下拉菜单的容器(可能是 div)中,然后使用包含 :hover 的 CSS 选择器在该容器上,深入到项目文本。只要它们仍在菜单或其下拉菜单上,它就应该仍然被悬停选择器覆盖。
How about putting the menu item, along with its drop down in a container (div probably) that expands to include the dropdown menu, and then use a CSS selector including :hover on that container, that drills down to the item text. As long as they are still on the menu or its dropdown, it should still be covered by the hover selector.
当鼠标悬停在
You can use CSS ot JS to change the title's color when the mouse hovers the <li> that contains the title instead of when it hovers the title itself.