私はレスポンシブサイトを作成していて、ホバー時にヘッダーの背景画像を変更するようにナビゲーションを取得しようとしています。基本的に、ページを開くと画像は直線であり、リンクにカーソルを合わせるとテキストの上の線にアイコンが表示されます、うまくいけば、次のようになります。
!( https://dl.dropboxusercontent.com/u/29163680/Screen%20shot%202013-10-17%20at%203.00.51%20PM.png )
私はいくつかのホバーテクニックを見つけましたが、応答性に優れたものは何もありません.どんな解決策でも大歓迎です! ありがとう！
これは、コードについてこれまでのところ私が持っているものであり、セマンティックまたはレスポンシブではありません
HTML
<body>
<a href=""
onMouseover="document.imagename.src=image2.src;" onMouseout="document.imagename.src=image1.src">PORTFOLIO</a>
<a href=""
onMouseover="document.imagename.src=image3.src" onMouseout="document.imagename.src=image1.src">ABOUT</a>
<a href=""
onMouseover="document.imagename.src=image4.src" onMouseout="document.imagename.src=image1.src">ABOUT</a>
<a href=""
onMouseover="document.imagename.src=image5.src" onMouseout="document.imagename.src=image1.src">ABOUT</a>
<img src="images/head1.png" name="imagename" border="0">
</body>
ジャバスクリプト
<SCRIPT LANGUAGE="JAVASCRIPT">
if (document.images) {
image1 = new Image
image2 = new Image
image3 = new Image
image4 = new Image
image5 = new Image
image1.src = "https://dl.dropboxusercontent.com/u/29163680/head1.png"
image2.src = "https://dl.dropboxusercontent.com/u/29163680/head2.png"
image3.src = "https://dl.dropboxusercontent.com/u/29163680/head3.png"
image4.src = "https://dl.dropboxusercontent.com/u/29163680/head4.png"
image5.src = "https://dl.dropboxusercontent.com/u/29163680/head5.png"
}
</SCRIPT>