見出し画像

Aタグに関するメモ(HTML/CSS)

(1)リンク先ページはないが、マウスオーバー時のアイコンをリンクっぽくする

 Aタグのhref属性に「href = ”#!”」を設定する。
 (どこにも遷移させない場合に指定)

idとして「!」を指定しない、という前提ので
「#!」と設定するのが慣例。
「!」のid部分は、ページ内に存在しないidであれば、OK。


(2)ページのリロード

 Aタグのhref属性に「href = ””」を設定する。


(3)トップページへの遷移

Aタグのhref属性に「href = ”#”」を設定する。


(4)マウスオーバー時(hover)の画像を変更する

CSSの疑似要素で表現する。
(Javascript側からは「onmouseover( )」等のイベントで直接指示できない)

(例) 

a:before{ content: url(common/0001.png);
      margin: 10px;
      position: relative;
      top: 2px;
     }

 a :hover :before { content: url(アイコンのパス); }


【出典】
https://www.marorika.com/entry/href

http://clubringo.com/hover-effect-img-text/

いいなと思ったら応援しよう!