0

我正在尝试在我的导航菜单的 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] 的结果不是对象。”

4

2 回答 2

3

不幸的是，当前版本的 Safari 将忽略鼠标悬停。这是因为在 6S 之前，Apple 触摸屏（iPhone、iPad）没有等效的概念，即在按下之前鼠标悬停在某物上，因此使用鼠标悬停会导致界面无法在触摸屏设备上按预期运行。

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

于 2015-09-14T20:18:45.513 回答
1

我会尝试将您的功能更改为如下所示：

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

这样，它直接选择您<img>使用您传递的 id。

于 2010-09-18T00:33:04.303 回答