问题标签 [hover]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
10 回答
658338 浏览

css - div背景颜色,改变悬停

我正在尝试在鼠标悬停时更改 div 的背景颜色

div {background:white;}
div a:hover{background:grey; 宽度:100%;
显示:块;文字装饰:无;}

只有div 内的链接获得背景颜色

我该怎么做才能使整个 div 获得该背景颜色?

谢谢你

编辑:
如何使整个 div 充当链接 - 当您单击该 div 上的任意位置时,将您带到一个地址。

0 投票
4 回答
23905 浏览

jquery - jQuery 垂直悬停手风琴

垂直悬停手风琴有哪些 jQuery 插件?我正在寻找一个用于菜单的插件,其中:

  • 子菜单项只会在悬停一秒钟后展开(因此可能使用 hoverIntent 插件);
  • 如果关闭 Javascript,它可以优雅地降级;和
  • 当鼠标完全离开它时,将折叠/关闭任何子菜单项。

十分感谢!

0 投票
2 回答
6882 浏览

css - 为什么 a:hover 在 CSS 中会被覆盖?

如果我有这个 CSS:

ID 下的链接在悬停时始终显示为黑色。我知道使用 ID 具有更高的优先级,但是,我没有覆盖:hover选择器,只有:link选择器,所以悬停不应该显示为红色吗?

0 投票
1 回答
8433 浏览

jquery - jQuery hover() not working with absolutely positioned elements and animation

I have some html that looks like this:

And I have a jquery event registered on the anchor tag:

When I mouse over the anchor tag, it displays the span.text and moves the anchor 5px to the right.

Now, due to complications that I don't feel like getting into, I have to set position: relative; on the container and absolutely position the icon and the text so that the icon appears on the left and the text on the right.

THE PROBLEM:

When I mouse over the anchor tag, the icon moves right, and the mouse ends up over top of the text (which appears). Unfortunately, the 'out' function gets called if I move my mouse from the icon to the text and the animation starts looping like crazy. I don't understand what's causing the "out" event to fire, as the mouse is never leaving the anchor tag.

Thanks!

0 投票
1 回答
2520 浏览

actionscript-3 - 如何在 flex 3 中有一个类似于谷歌地理地图可视化示例中的悬停详细信息框

我想知道是否有一个已经可用的悬停详细信息组件,类似于谷歌地理地图可视化示例中显示的显示城市名称及其详细信息的组件,或任何其他可用于悬停详细信息框的类似组件。

0 投票
4 回答
222899 浏览

javascript - 使用带有 HTML 图像映射的 JQuery 悬停

我有一个复杂的背景图像,其中包含许多需要翻转插图突出显示的小区域,以及每个区域的附加文本显示和相关链接。最终插图使用 z-index 堆叠了几个具有透明度的静态图像,并且高光翻转插图需要显示在中间的“三明治”层之一中才能达到预期的效果。

在对块进行了一些不成功的操作后,我决定可以使用老式的图像映射来完成。我制作了一个带有四个几何形状轮廓的示意性测试地图,并使用 png 翻转“填充”它们。这个想法是将图像映射与底部背景层相关联,使用 css {visibility: hidden} 初始化所有翻转,并使用 Jquery 的悬停方法使它们可见,并在单独的 div 中显示关联的文本。单独的文本函数是我不尝试使用 :hover 伪类而不是 jQuery 悬停的原因。因为我使用的是图像贴图,所以我将所有翻转 png(具有透明背景)的大小调整为完整容器的大小,以便精确放置,以便所有内容都精确排列。

我得到的作品......不是真的!正确映射图像映射以仅激活几何区域。但是每个翻转区域的 href 只能间歇性地工作,并且使用带有 css 可见性的 Jquery 悬停是一团糟。期望的行为是滚入该区域只会使形状变得坚固。实际发生的是形状内部的任何运动都会在可见和隐藏之间快速切换;当光标停在形状内时,它可能可见,也可能不可见。任何想法表示赞赏!

悬停设置示例(我最终将使用数组来实现真正的悬停、关联的链接和文本):

图片地图:

0 投票
7 回答
7233 浏览

jquery - 当一个悬停在上面时,jQuery 淡化/变暗其他列表元素,我在那里 90%..?

我有一个无序列表,可能有 30 项。当其中一个项目悬停时,列表的其余项目消失到 30%,悬停的项目保持在 100%;当您从列表中移出时,它们都会恢复到 100%,而我已经做到了。

当您从一个项目移到另一个项目时,我的问题出现了,其他列表项目淡化回 100%,然后又回落到 30%。我希望他们保持在 30%,除非用户离开整个列表。

我在每个列表项上使用 hoverIntent 插件。我还使用 jQuery 向当前列表项添加了一个类,这样我就可以淡化其余部分,并在您离开后将其删除。我使用了 jQuery Cookbook 网站 ( http://docs.jquery.com/Cookbook/wait )上的等待函数

你明白我的意思吗?

到目前为止,这是我的代码:

*显然这是在 $(document).ready(function()

任何人都可以帮助我吗?

非常感谢

0 投票
4 回答
8744 浏览

html - Firefox 停留在“等待”或“正在传输数据”

我有一个网站,其中包含一个 CSS 样式的按钮,用于在悬停时显示不同的图像。我等待页面完全加载,然后将鼠标移到该按钮上。

Firefox 将显示新图像,但状态栏卡住显示“正在从 www.server.com 传输数据”或“正在等待 www.server.com”,并且永远不会消失。我可以通过Firebug的网络视图看到图像在悬停时正确下载,并且我在任何地方都看不到其他错误。

什么会导致这种情况?我之所以问,是因为我在此页面上遇到了后续 Ajax 调用完成脚本的虚假问题。

Firefox 卡住显示此状态是一个常见问题吗?原因是什么?

0 投票
2 回答
145 浏览

hover - 虚拟地球控制 - 奇怪的浮动行为

我一直在学习“NerdDinner”MVC 教程,我刚刚达到了关于添加地图控件的部分。我遇到了虚拟地球控件的一些奇怪行为,我似乎无法弄清楚:

http://img17.imageshack.us/img17/3379/virtualearth.png

如果看不到图片,Virtual Earth 控件浮动在左上角,遮挡了窗体,与包含的 div 分开,这也不是真正在正确的位置,但它比控件的位置更好是。

据我所知,我直接从教程中复制了所有相关代码。有没有人见过这样的东西?

我的大部分测试都使用 Firefox,但它在 Internet Explorer 7 中的行为似乎相同。

0 投票
5 回答
7595 浏览

javascript - 是否有跨浏览器的方式来通过 css 扩展点击文本?

首先,这是我想做的事情:

我有代码设置,因此当我将鼠标悬停在第 1 行、第 2 行或第 3 行上时,该行会突出显示。这是通过 css 完成的。

我希望能够(例如)单击 row1 然后它看起来像这样:

该文本将保留在那里,直到我单击另一行时它才会消失。例如,假设我接下来点击了第 2 行。

我找到了有关使用 javascript 执行此操作并设置文本可见性的代码,但我不确定如何在没有大量重复代码的情况下执行此操作...