NEW ARTICLE
tkinterでテキストボックスに絵文字を表示する方法
  • 【CSS初心者向け】マウスオン時にメニューの色を変える方法！　コピペ可能なソースコード付き

【CSS初心者向け】マウスオン時にメニューの色を変える方法！　コピペ可能なソースコード付き

【CSS初心者向け】マウスオン時にメニューの色を変える方法！　コピペ可能なソースコード付き

　メニューの背景色や文字色をマウスオーバーの時に反映させる方法をまとめてみました。これでマウスカーソルを上に乗せると色が変わったりする動きのあるホームページを作ることができます。サンプルのコードを置いておくのでコピペで実装できます。良かったら使ってみてくださいね。

追加するCSSのコード

#menu li a:hover{
    background: #000;   /*背景色*/
    color: #fff;        /*文字色*/
}
#(id名) li aid名のタグ内にある、リストの<a>で区切った場所を対象にしています。
:hover HTML内の要素にマウスカーソルを乗せた時にCSSを反映させます。常に反映させたいCSSとわけて記述しましょう。

　この場合は、メニューのリンクを含むテキスト内にマウスが乗った時、背景を黒・文字を白にします。

サンプル

　ファイルの場所

  • index.html
  • style.css

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>マウスオンで色を変える</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="menu">
<li><a href="">メニュー</a></li>
<li><a href="">カテゴリー</a></li>
<li><a href="">カート</a></li>
<li><a href="">マイページ</a></li>
<li><a href="">サーチ</a></li>
</nav>	
</body>
</html>

CSS

/*リスト共通設定*/
li{
	list-style-type: none;/*リストの"・"を消す*/
}
/*menuのCSS*/
#menu li a{
	float: left;/*横並びに*/
	width: 20%;/*5つのメニューを並べれるサイズに*/
	font-size: 20px;/*文字サイズ*/
	padding:0px 10px;/*余白（上下0px,左右10px）*/
	text-align: center;/*中央揃え*/
	text-decoration: none;/*リンクの下線を消す*/
	background-color: #fff;/*背景色＝白*/
	display: block;/*リンクをブロックに*/
}
/*マウスオンで色を変えるCSS*/
#menu li a:hover{
    background: #000;   /*背景色=黒*/
    color: #fff;        /*文字色=白*/
}

　これで実装できます。試してみてくださいね。