关键词：
【中文标题】jQuery .hover 在 Safari 或 Chrome 中不起作用【英文标题】：jQuery .hover not working in Safari or Chrome 【发布时间】：2011-03-07 15:10:35 【问题描述】：我目前正在尝试让一些 jQuery 悬停效果在所有浏览器中正确呈现。目前，firefox、IE、opera 都在做他们应该做的事情。但是，Safari 和 Chrome 却没有。
代码如下所示：
<div id="button1">
<div id="work_title" class="title_james">
WORDS
</div>
</div>
<div id="button2">
<div id="work_title" class="title_mike">
MORE WORDS
</div>
</div>
影响它的脚本看起来像这样
<script>
$(function()
$("#button2").hover(
function()
$("#james").css('z-index', '100')
$(".title_mike").css('width', '590px')
, function()
$("#james").css('z-index', '')
$(".title_mike").css('width', '')
);
);
$(function()
$("#button1").hover(
function()
$(".title_james").css('width', '785px')
, function()
$(".title_james").css('width', '')
);
);
</script>
我想要做的是将鼠标悬停在两个大文本区域上时更改 css 样式的两个元素..
我已经尝试了 mouseenter .addClass 和 mouseleave .removeClass 的东西，但根本没有用。所以当我让它在 Firefox 中工作时，我很高兴......然后我做了跨浏览器检查，我得到了又伤心了。。
您可以在以下位置看到它的实际效果： http://roboticmonsters.com/who
【问题讨论】：
在 SO 上，您可以对有帮助的答案进行投票，并接受一个答案作为向其他用户表示感谢的解决方案。 【参考方案1】：使用 Chrome 中的开发工具，它说每个 javascript 函数的末尾都有一个无效令牌。 IE 开发工具也显示了一个无效的令牌，但它似乎忽略了这一点并正确呈现。如果可以，请检查您的来源并删除令牌。
IE：
铬：
【讨论】：
哇，谢谢你...我责怪从 jqueryui 站点复制和粘贴，然后编辑变量名：S.. 愚蠢的复制粘贴【参考方案2】：$.css 接受一个对象：
$("#james").css('z-index': '100');
注意花括号和冒号（不是逗号）。
这样您就可以在一个中指定多个 css 规则：
$("#james").css('z-index': '100', 'height': '100px');
如果您要获取一个css规则的值，只需将名称作为字符串传入：
$("#james").css('z-index'); // returns 100
【讨论】：
.css 也可以只接受属性名称和值，如问题代码中所示。【参考方案3】：这可能是因为您试图在 DOM 加载之前绑定到这些事件。
我没有太多时间回答为什么它被破坏了，但以下内容在 chrome 中对我有用。
$(document).ready(function()
$("#button2").hover(function()
$("#james").css('z-index', '100');
$(".title_mike").css('width', '590px');
,
function()
$("#james").css('z-index', '');
$(".title_mike").css('width', '');
);
$("#button1").hover(function()
$(".title_james").css('width', '785px');
,
function()
$(".title_james").css('width', '');
);
);
【讨论】：
【参考方案4】：如果只使用下面的代码就可以了：
$("#button2").hover(
function()
$("#james").css('z-index', '100')
$(".title_mike").css('width', '590px')
, function()
$("#james").css('z-index', '')
$(".title_mike").css('width', '')
);
否则 Chrome 会报告：Unexpected token ILLEGAL。要亲自查看，请右键单击页面并选择inspect element。点击右下角的小红x。
更新：实际上，如果您删除@anothershubery 的答案中显示的非法字符，您的代码可以正常工作
【讨论】：
jQuery .hover() 或 .animate() 在 Marquee 插件中导致冒泡动画
】jQuery.hover()或.animate()在Marquee插件中导致冒泡动画【英文标题】：jQuery.hover()or.animate()causingbubbledanimationsinMarqueeplugin【发布时间】：2012-07-0606:59:21【问题描述】：我在玩GivaLabsjQueryMarqueeplugin。示例jsFiddlehere。示例中有两行切换文... 查看详情
导航 CSS :hover 在 Safari 上推送内容
】导航CSS:hover在Safari上推送内容【英文标题】：CSSfornavigation:hoverpushingcontentonSafari【发布时间】：2017-01-3001:35:57【问题描述】：我一直在使用WordPress主题在我们的网站上工作，并对其进行了一些调整，并注意到Safari中用于:hover的... 查看详情
使用 jQuery .offset() 查找 SVG 的位置在 safari 中不起作用
】使用jQuery.offset()查找SVG的位置在safari中不起作用【英文标题】：FindpositionofanSVGwithjQuery.offset()notworkinginsafari【发布时间】：2022-01-0819:40:27【问题描述】：这段代码在chrome中运行良好$("#el").hover(function()letposition=$(this).offset();$(\'#po... 查看详情
当用户放大或缩小时，jQuery 动画在 Chrome/Safari 上的行为异常
】当用户放大或缩小时，jQuery动画在Chrome/Safari上的行为异常【英文标题】：jQueryanimationsmisbehaveonChrome/SafariwhentheuserzoomsInorout【发布时间】：2011-05-1406:48:07【问题描述】：我想向我们的几位设计师展示一个jQuery动画的快速模型，... 查看详情
当用户“点击”时，在 Mobile Safari 中添加 :hover 效果
】当用户“点击”时，在MobileSafari中添加:hover效果【英文标题】：Addinga:hovereffectinMobileSafariwhentheuser"taps"【发布时间】：2011-10-3111:02:47【问题描述】：是否可以在MobileSafari用户单击div区域时触发:hover事件？它不一定是链接... 查看详情
CSS :hover 在 iOS Safari 和 Chrome 上不起作用
】CSS:hover在iOSSafari和Chrome上不起作用【英文标题】：CSS:hovernotworkingoniOSSafariandChrome【发布时间】：2016-05-1307:04:15【问题描述】：我有一个圆形div，它有一个圆形图像，底部有一个标题opacity:0.5;在悬停时，不透明度应该变为1。它... 查看详情
在没有屏幕刷新的情况下，使用 jQuery 更改不透明度在 Chrome 或 Safari 中不起作用
】在没有屏幕刷新的情况下，使用jQuery更改不透明度在Chrome或Safari中不起作用【英文标题】：ChangingopacityusingjQuerydoesn\'tworkinChromeorSafariwithoutscreenrefresh【发布时间】：2012-06-2301:39:10【问题描述】：我希望在点击时显示/隐藏内容，... 查看详情
使用 is(:hover) 在 IE 中的 jQuery 挑战？
】使用is(:hover)在IE中的jQuery挑战？【英文标题】：jQuerychallengeinIEwithis(:hover)?【发布时间】：2012-04-2715:27:00【问题描述】：我几天来一直在为一个问题苦苦挣扎，但找不到答案。我的鼠标悬停在所有浏览器中都可以正常工作，但... 查看详情
如果用户在文档准备好之前悬停，jQuery .hover 会导致问题
】如果用户在文档准备好之前悬停，jQuery.hover会导致问题【英文标题】：jQuery.hovercausingproblemsifuserishoveringbeforedocready【发布时间】：2011-06-2320:27:05【问题描述】：除了一个条件之外，下面的代码效果很好。如果用户在文档准备好... 查看详情
jQuery hover() 中的语法错误
】jQueryhover()中的语法错误【英文标题】：SyntaxerrorinjQueryhover()【发布时间】：2011-12-1504:19:27【问题描述】：我正在尝试构建一个带有导航菜单的网站，该菜单在将鼠标悬停在当前未“选择”或“活动”的导航按钮上时切换类。这... 查看详情
Safari中留下jquery动画的问题
】Safari中留下jquery动画的问题【英文标题】：ProblemswithjqueryanimateleftinSafari【发布时间】：2013-08-1905:59:29【问题描述】：我正在尝试创建一个100%宽度/高度的内容“滑块”，它使用按钮和锚链接来跳转到幻灯片。我对javascript或jquer... 查看详情
纯 Javascript 或 VueJS 事件的 Mousemove 和 Hover Jquery 效果
】纯Javascript或VueJS事件的Mousemove和HoverJquery效果【英文标题】：MousemoveandHoverJqueryeffecttoPureJavascriptorVueJSevent【发布时间】：2021-07-1702:59:49【问题描述】：我有一个VueJS组件，它是美国的svg地图图像。我之前使用jquery创建悬停效果... 查看详情
jQuery offset() 在 Safari / Chrome iOS 中不起作用
】jQueryoffset()在Safari/ChromeiOS中不起作用【英文标题】：jQueryoffset()doesnotworkinSafari/ChromeiOS【发布时间】：2014-10-2711:57:29【问题描述】：以下代码循环遍历图像数组并根据Highcharts标记（与图表上的点关联的文本）的位置创建它们。... 查看详情
如何在 .hover() 中使用油门； jQuery？
】如何在.hover()中使用油门；jQuery？【英文标题】：HowdoIusethrottlewith.hover();jQuery?【发布时间】：2021-12-1318:12:26【问题描述】：我正在尝试找到使用jQuery来限制悬停功能的最简洁的方法。有很多这样的例子，但它们似乎都没有按预... 查看详情
jQuery .hover() 似乎在一段时间后“消失”
】jQuery.hover()似乎在一段时间后“消失”【英文标题】：jQuery.hover()seemsto"disappear"afterawhile【发布时间】：2011-09-0821:51:06【问题描述】：$(\'img.questSign\').hover(function()$(\'img.questSign\').attr(\'src\',\'/media/quest-sign-small-hove 查看详情
在 jquery hover() 之后，我的元素上没有激活 css :hover
】在jqueryhover()之后，我的元素上没有激活css:hover【英文标题】：Afterjqueryhover(),css:hoverisnotativatedonmyelements【发布时间】：2019-08-2815:10:42【问题描述】：jqueryhover功能后，csshover不起作用。所以，我的html中有几个svg元素。在这些svg... 查看详情
jquery 仅在 Safari 中产生保证金问题
】jquery仅在Safari中产生保证金问题【英文标题】：jqueryproducingmarginissuesinSafarionly【发布时间】：2012-06-2521:50:59【问题描述】：使用响应式caroufredsel，在Chrome和Firefox中就像一个魅力，但在Safari中，它突然产生800像素的顶部和底部... 查看详情
如何：在 mouseOver/mouseOut - JQuery .hover 上添加/删除类？
】如何：在mouseOver/mouseOut-JQuery.hover上添加/删除类？【英文标题】：Howto:Add/RemoveClassonmouseOver/mouseOut-JQuery.hover?【发布时间】：2013-05-2503:59:44【问题描述】：希望更改框的边框颜色....当用户鼠标悬停/移出时..这是尝试的代码..需要... 查看详情