CSS/javascript 悬停在 chrome 中无法正确显示答案

【问题标题】：CSS/javascript hover does not display correctly in chromeCSS/javascript 悬停在 chrome 中无法正确显示
【发布时间】：2011-03-22 22:43:48
【问题描述】：

我正在构建一个站点，该站点具有一个带有弹出框的图像地图菜单，当鼠标悬停在特定区域上时，该弹出框应该在鼠标上弹出。它在 Firefox 和 IE 中效果很好，但是当我在 chrome 中加载页面时，这些框看起来好像页面没有滚动。如果页面一直滚动到顶部，它可以正常工作，但是一旦用户向下滚动，这些框就会在页面上居高不下。

我正在使用从http://www.dhtmlgoodies.com/index.html?whichScript=bubble_tooltip www(dot)dramanotebook(dot)com/menu/ 获得的脚本（我只能放入一个超链接）

提前感谢您的帮助

【问题讨论】：

标签： javascript css google-chrome tooltip hover

【解决方案1】：

我正要问“你在 Safari 中试过这个吗？”，因为 Chrome 和 Safari 都使用 webkit 引擎。

看看 .js 文件。

function showToolTip(e,text){
/* blah blah*/
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; /**** THIS  ****/
var leftPos = e.clientX - 100;
/*etc.*/
}

它有一个专门应用于 Safari 的修复，使用 userAgent 字符串。 Chrome 也会在用户代理字符串中发送“Safari”，因此它也会将其应用于 Chrome。这通常被认为是一种不好的做法。一般来说，我会说 dhtmlgoodies 的脚本已经过时了。较新的 webkit 渲染器是否仍需要此修复程序？谁知道。您可以尝试将其注释掉，看看是否能解决问题。

【讨论】：

【解决方案2】：

这是此脚本中的一个错误，它也显示在示例页面上。也许它足以删除这一行：

if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;

【讨论】：