カテゴリー別アーカイブ: HTML/CSS

ブロック要素の枠線をマウスオーバーさせたときに点滅明滅させたい

なんか入力場所とか画像とか押せますよー的な場所を示す枠線をマウスオーバーされた時に点滅・明滅をさせたい場合のサンプルコード。
javascriptのonmouse=this.~みたいなかんじでもできるけど、CSSだと簡単すぎるほど簡単。こっちのがお勧めだろう。
その他、画像等に適用するテクニックとしては

  • opacityとか使って薄消しにしたりとか
  • hover時にテキスト乗せたりとか
  • position:relativeで画像をピクつかせたりとか
  • 画像を拡大させたりとか

色々あるけど省略。俺には必要ないから。

<html>
<head>
<style type="text/css">
<!--
.waku_onmouse{
background-color:#eee;
border:    1px #000000 solid;
}
.waku_onmouse:hover{
border:    1px #ff0000 solid;
}
-->
</style>
</head>
<body>
<span class='waku_onmouse'> test </span>
</body>
</html>

実行結果:

test