ホーム >>> HTML整理ノート

リンクの擬似クラス　応用

Sample 1

ホーム日本橋HTMLお山お花リンク

<a>リンクの通常時と:hover時との背景画像を変える。

Sample 2

ホーム日本橋HTMLお山お花リンク

<a>リンクを２種類にclass分けする。classごとに背景画像、色などのスタイルを区別し、それぞれ:hover時のスタイルを指定。

Sample Source......................................................................>>>

<style TYPE="text/css">
<!--
 a {text-decoration:none;font:16px;border:1px solid navy;
　　　　　　　　　　　　　　font:bold 130% 'ＭＳ 明朝';padding:1mm 4mm}
 a.sp {color:#800000;background-Image:url(../../images/bg/bgimg01.gif);}
 a.sp:hover {color:#00008b;background-Image:url(../../images/bg/tairu1.gif);}
 a.s1:link,a.s1:visited {color:#800000;background-Image:url(../../images/bg/bgimg01.gif);}
 a.s2:link,a.s2:visited {color:#00008b;background-Image:url(../../images/bg/tairu1.gif);}
 a.s1:hover {color:#ee82ee;text-decoration:underline;background-Image:url();
　　　　　　　　　　　　　　border:1px solid white;}
 a.s2:hover {color:#006400;text-decoration:underline;background-Image:url();
　　　　　　　　　　　　　　border:1px solid white;}
-->
</style>
</head>

<body>
<h5>Sample 1</h5><p>
  <a class="sp" href="../../index.html">ホーム</a>
  <a class="sp" href="../../dosv/dosv.htm">日本橋</a>
  <a class="sp" href="../../htmlnote.html">HTML</a>
  <a class="sp" href="../../yama.html">お山</a>
  <a class="sp" href="../../hana/flower/flower.html">お花</a>
<a class="sp" href="../../dosv/xxx.htm">リンク</a></p> 
</p>

<h5>Sample 1</h5><p>
　<a class="s1" href="../../index.html">ホーム</a>
　<a class="s2" href="../../dosv/dosv.htm">日本橋</a>
　<a class="s1" href="../../htmlnote.html">HTML</a>
　<a class="s2" href="../../yama.html">お山</a>
　<a class="s1" href="../../hana/flower/flower.html">お花</a>
　<a class="s2" href="../../dosv/xxx.htm">リンク</a>
</p>