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 に答える