top画像（トマト）

hoverの可愛い使い方

hoverをマスターしましょう。
リンク系以外のhoverをご紹介します。

li:hover
p:hover
td:hover
tr:hover
id、class名:hover

私がよく使用する＆使ったことがあるhoverです。
ほかにも出来るんでしょうがやったことないので今回は省かせていただきます。

li:hoverサンプル

  • TOP
  • ABOUT
  • BBS
  • LINK

<div class="clearfix">
<ul class="ris">
<li>TOP</li>
<li>ABOUT</li>
<li>BBS</li>
<li>LINK</li>
</ul>
</div>

.ris {
width:500px;
}
.ris li {
width:100px;
margin-right:10px;
line-height:30px;
text-align:center;
background-color:#fdf;
float:left;
border:dashed 1px #f2f;
}
.ris li:hover {
background-color:#f4f;
}

p:hoverサンプル

文字

文字２

文字３

<p>文字</p>
<p>文字２</p>
<p>文字３</p>

p:hover {
color:#f2f;
}

id、class名:hoverサンプル

文字

文字２

文字３

<p>文字</p>
<p class="text">文字２</p>
<p>文字３</p>

text:hover {
color:#f2f;
}