2010年05月03日

a:hoverで、へこむアンカーテキスト、リンクボタン

スポンサード リンク

 Javascriptを使わずCSSだけで
作るへこむリンクボタン,

JavaScript スタイルシートサンプル集
格安高速バスキラキラ号

サンプルソース

<html>
 <head>
  <title>マウスが乗るとへこむアンカーテキスト、ボタン</title>
<style type="text/css">
<!--/*cssだけで作るへこむテキスト、ボタン*/
.push0 a:hover{
  position: relative; /* 相対位置への配置 */
  top: 1px;
  left: 1px;

  text-decoration: none; /* 下線なし */
}
.push1 a{
  display: block; /* ブロック要素にする */
  width: 170px;  /* 横幅 */
  color: #000000; /* 文字色 */
  background-color: #e0ffff; /* 背景色 */
  border: outset 2px #7cfc00; /* ボーダー */
  margin-bottom: 5px;  /* 下 マージン */
  padding: 5px;       /* 内側余白 */
  text-align : left;     /* 水平位置 左揃え */
  text-decoration: none; /* 下線なし */
}
.push1 a:hover {
  position: relative;
  top: 1px;
  left: 1px;

  color: red;
  background-color: #90ee90;
  border: inset 2px #7cfc00;
}

-->
</style>
</head>
<body>
  <p class="push0">
   <a href="#">JavaScript スタイルシートサンプル集</a><br>
   <a href="#">格安高速バスキラキラ号</a>
 </p>
<div class="push1">
  <a href="#">背景 背景画像</a>
  <a href="#">スタイルシート CSS</a>
  <a href="#">レンタル サーバー</a>
  <a href="#">動く文字 ティッカー</a>
  <a href="#">テーブル</a>
</div>

</body>
</html>

a:hover疑似クラス
 (アンカーテキストにマウスカーソルが乗った時)を使ってプロパティ値を換え
スタイルを変更しています。
position:relative; top: *px; left: *px;
 [相対的配置] 本来表示されるべき位置から、 配置の設定分
top: 1px;(上から下へ1px)
left: 1px;(左から右へ1px
移動した位置に表示されます。
border: outset 2px #7cfc00;
枠線の設定です。border : スタイル 幅 色 ;  書き方は順浮同でスペースで区切って記述します。
border のスタイルに outset を指定すると枠線に囲まれた領域が盛り上がって観えます。
inset を指定すると少し窪んで観えます。以上を利用してマウスカーソルが乗った時
右下に押し下したようにしています。
文字色や背景色を変えるにはcolorプロパティ,background-colorプロパティ
値を変更します。カラーコード 色見本

a:hoverを使ってアンカーのスタイルを変更します
hover疑似クラスでテーブルの行とセルをハイライト
さくらのレンタルサーバ スタンダード
無料レンタルカウンター「デジデジ」
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

posted by javaScript at 19:32 | 大阪 ☁ | リンク、ジャンプ、ページ移動 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。