我正在尝试在 xhtml 页面中为我的导航菜单获得 onmouseover 和 onmouseout 效果。
此代码仅在 Firefox 中有效，在其他浏览器中无效。有人可以告诉我如何让它在所有浏览器上运行吗？
这是我的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
/* <![CDATA[*/
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}
/* ]]> */
</script>
<li><a href="index.html" onmouseover="roll_over('home', 'images/homeSelected.png')" onmouseout="roll_over('home', 'images/home.png')" ><img src="images/home.png" alt="Home" id="home" /></a></li>
<li><a href="about.html" onmouseover="roll_over('about', 'images/aboutSelected.png')" onmouseout="roll_over('about', 'images/about.png')" ><img src="images/about.png" alt="About Me" id="about" /></a></li>
<li><a href="portfolio.html" ><img src="images/portfolioSelected.png" alt="My Portfolio" id="portfolio" /></a></li>
<li><a href="contact.html" onmouseover="roll_over('contact', 'images/contactSelected.png')" onmouseout="roll_over('contact', 'images/contact.png')" ><img src="images/contact.png" alt="Contact Me" id="contact" /></a></li>
</ul>
</div>
</div>
我已经在 Chrome 和 IE 7 & 8 中尝试过此操作，但错误仍然存在。 Safari 给我错误:TypeError: 表达式 'document[img_name]' [undefined] 的结果不是对象。”
最佳答案
不幸的是，当前版本的 Safari 将忽略 onmouseover。这是因为在 6S 之前，Apple 触摸屏(iPhone、iPad)没有在按下之前将鼠标悬停在某物上的等效概念，因此使用鼠标悬停会导致界面在触摸屏设备上无法按预期运行。
因此，为了鼓励一致的设计，Safari 停止支持 onmouseover，即使对于有鼠标的设备也是如此。
关于javascript - Safari 中的 onmouseover 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3739862/