4

我想创建一个菜单，当鼠标悬停和点击时会改变。

但是，我的 onclick 只会在单击时变为空白。

我发现如果我删除 a href，onclick 功能就会起作用。

有谁知道如何解决这个问题？

<a href="{storeurl}?act=aboutus">
  <img src="skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg"
       onclick="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg'"
       onmouseover="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg'"
       onmouseout="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg'"/>
</a>
4

3 回答 3

6

return false;在回调函数末尾添加：

<a href="{storeurl}?act=aboutus"><img src="skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg"
                                                               onclick="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg'; return false;"
                                                               onmouseover="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg'"
                                                               onmouseout="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg'"
                                                              /></a>
于 2012-10-03T06:25:51.763 回答
2

您可以为此使用 CSS。示例html：

<ul>
    <li><a href="#n">Whisky</a></li>
</ul>

示例css：

ul a {
  display: block;
  background: url('skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg') no-repeat;
}

ul a:active,
ul a:focus {
  background: url(skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg) no-repeat;
}

ul a:hover {
  background: url('skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg') no-repeat;
}

演示：http: //jsfiddle.net/FakeHeal/VtZVz/3/

于 2012-10-03T06:25:47.093 回答
2

你可以在没有 jquery 库的情况下做到这一点

只需简单的 javascript

  <html>
  <head>
  <script>
  function myFunction()
  {
   alert("Hello World!");
  }
  </script>
 </head>

  <body>
  <img src="test.png" onclick="myFunction()">
  </body>
  </html>
于 2014-01-31T13:52:11.507 回答