Question

我正在尝试在导航菜单的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＆amp; 8但错误仍然存在。 Safari给出了错误：TypeError：表达式'document [img_name]'[undefined]的结果不是对象。“

Answer 1

目前，Safari的当前版本将忽略onmouseover。这是因为在6S之前，Apple触摸屏（iPhone，iPad）在按下之前没有相同的概念，因此使用鼠标悬停导致接口在触摸屏设备上无法正常工作。

因此，为了鼓励一致的设计，即使对于有鼠标的设备，Safari也停止支持onmouseover。

Answer 2

我会尝试将您的功能更改为：

 function roll_over(img_name, img_src) 
    { 
        document.getElementById(img_name).src = img_src; 
    }

这样就可以使用您传递的ID直接选择<img>。

onmouseover与Safari有关的问题

2 个答案: