おぼえられないから

ただただ自分の覚え書きのためです。

個人的な覚書なので見ても役に立ちませんよ。

オンマウスで背景画像が変わる

スタイルシートだけで動かす方法 

参考ページ
http://yume.hacca.jp/koiki/css/listyoko.htm 
https://html-coding.co.jp/knowhow/tips/rollover/ 
htmlソース
<div id="menu">
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">DIARY</a></li>
<li><a href="#">BBS</a></li>
</ul> 
</div>

スタイルシート
#menu ul{
margin: 0; 
padding: 0; 
list-style: none;
}
#menu li{ 
display: inline; 
padding: 0; 
margin: 0; 
float: left;
}
#menu li a{
display: block; 
border-left: 1px solid #474655;
border-top: 1px solid #474655;
border-bottom: 1px solid #474655;
background-color: #fff;
padding: 3px;
text-decoration: none;
color: #333;
width: 100px; 
margin: 1px 0px;
text-align: center;
font-size: 14px;
}
#menu li a:hover{
border-left: 1px solid #474655;
border-top: 1px solid #474655;
border-bottom: 1px solid #474655;
background-color: #F3D898;
}
#menu #haji li a{
display: block; 
border: 1px solid #474655;
background-color: #fff;
padding: padding: 3px 10px;;
text-decoration: none;
color: #333;
width: 100px; 
margin: 1px 0px;
text-align: center;
font-size: 14px;
}
#menu #haji li a:hover{
display: block; 
border: 1px solid #474655;
background-color: #F3D898;

コメント

コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット