カーソル位置で色を変更する流れをJavaScriptで作成して見ました。いわゆるロールオーバー処理ですね。と言っても数行です。
HTMLはこんな感じ・・・
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>フォントの色変更</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="links/rule.css">
</head>
<body>
<script src="links/action.js"></script>
<h1>フォントの色を変更</h1><br>
<h4><div onmouseover="changeColor(this)"
onmouseout="revertColor(this)">
マウスポイントを乗せると、テキストの色が赤に変わり、
<br>
マウスポイントを離すと、テキストの色が元に戻ります。
</div>
</h4>
</body>
</html>
<!-- index.html -->
JavaScript↓はこれだけです。
/* action.js */
function changeColor(element) {
element.style.color = "red";
}
function revertColor(element) {
element.style.color = "";
}
/*カーソルを乗せたら赤に、外したら元の状態に*/
/* action.js */
CSS↓は定番です。
/* rule.css */
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
html {
overflow-y:scroll;
}
body *, ::before, ::after {
box-sizing: border-box;
}
.clearfix::after {
content: " ";
display: block;
clear: both;
}
body {
color: #000000;
background-color: white;
text-align: center;
font-size: 100%;
line-height: 1.7;
-webkit-text-size-adjust: 100%;
}
H1 {
font-weight: Bold;
font-size: 20px;
}
/* rule.css */
実行すると・・・
こんな感じです。
