1

リンク/画像を設定して、画像にカーソルを合わせると、ページ上のリンクがホバー状態になり、その逆になるようにするにはどうすればよいですか?

このサイトの内容と同様: http://www.adrianlawrence.co.nz/

どんな助けでも素晴らしいでしょう！

ありがとう！

4

2 に答える 2

0

イベント リスナーを 1 つ (画像またはリンク) にアタッチして、マウスオーバーをリッスンすることができます。一致する ID (画像とリンクの一致、つまり、画像 id = "image1"、リンク id = "link1") の要素を検索し、CSS を変更する関数を起動します。

于 2012-05-01T21:23:33.087 に答える
0

純粋な CSS と HTML を使用して、リンク先の Web サイトと同様の効果を生み出すことができます。

このフィドルをチェックしてください。

  1. リンク テキストと画像の両方を 1 つのa要素内に配置します。
  2. 各画像に個別のID.
  3. CSS を使用して、画像を目的の場所に絶対に (または相対的に呼び出して) 配置します。

HTML:

<a href="www.google.com">
    Hello there.
    <img id="img1" src="[SOURCE]" alt="Be Happy!" />
</a>​

CSS:

/* The Important Stuff */

#img1 {
    position:absolute;
    bottom:20px;
    right:45px;
}

a:hover {
    text-decoration:none;
}

a:hover img {
    opacity:.8;
}

/* The Unimportant Stuff */

body {
    background-color:black;
}

a {
    color:white;
}
于 2012-05-01T22:15:45.293 に答える