• CSSでのマウスオーバー効果
• 画像のマウスオーバー効果
• ナビゲーションメニューのマウスオーバー
• テキストのマウスオーバー効果
• JavaScriptを使ったマウスオーバー効果

CSSでのマウスオーバー効果

HTMLとCSSを使用して、マウスオーバー時にスタイルを変更する方法を紹介します。基本的には、CSSの:hover擬似クラスを使用します。

背景色を変える

<style>
.button {
    background-color: blue;
    color: white;
    padding: 10px;
    text-align: center;
    display: inline-block;
}

.button:hover {
    background-color: red;
}
</style>

<div class="button">マウスを載せてみて！</div>

枠線を追加する

<style>
.box {
    border: 2px solid black;
    width: 100px;
    height: 100px;
}

.box:hover {
    border: 2px solid red;
}
</style>

<div class="box"></div>

画像のマウスオーバー効果

画像のマウスオーバー時に変更を加える方法を紹介します。

画像を変更する

<style>
.image:hover {
    content: url('hover-image.jpg');
}
</style>

<img src="normal-image.jpg" class="image" alt="通常の画像">

画像を透明にする

<style>
.image:hover {
    opacity: 0.5;
}
</style>

<img src="image.jpg" class="image" alt="画像">

ナビゲーションメニューのマウスオーバー

ナビゲーションメニューのリンクにマウスオーバー時のエフェクトを加える方法を紹介します。

リンクの色を変える

<style>
.nav a {
    text-decoration: none;
    color: black;
}

.nav a:hover {
    color: blue;
}
</style>

<div class="nav">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">お問い合わせ</a>
</div>

ドロップダウンメニューを表示する

<style>
.menu {
    position: relative;
    display: inline-block;
}

.submenu {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid black;
}

.menu:hover .submenu {
    display: block;
}
</style>

<div class="menu">
    <span>メニュー</span>
    <div class="submenu">
        <a href="#">リンク1</a>
        <a href="#">リンク2</a>
    </div>
</div>

テキストのマウスオーバー効果

マウスオーバー時にテキストのスタイルを変える方法を紹介します。

フォントサイズを大きくする

<style>
.text:hover {
    font-size: 24px;
}
</style>

<span class="text">マウスオーバーで大きく！</span>

テキストの背景色を変える

<style>
.text:hover {
    background-color: yellow;
}
</style>

<span class="text">マウスオーバーで背景色変更！</span>

JavaScriptを使ったマウスオーバー効果

JavaScriptを使用すると、より複雑なマウスオーバーエフェクトを作成できます。

JavaScriptでテキストを変更

<script>
function changeText(element) {
    element.innerHTML = "マウスオーバーしました！";
}

function resetText(element) {
    element.innerHTML = "ここにマウスを載せてみて！";
}
</script>

<span onmouseover="changeText(this)" onmouseout="resetText(this)">
    ここにマウスを載せてみて！
</span>

JavaScriptで背景色をランダム変更

<script>
function randomColor() {
    let colors = ["red", "blue", "green", "yellow", "purple"];
    let color = colors[Math.floor(Math.random() * colors.length)];
    document.getElementById("colorBox").style.backgroundColor = color;
}
</script>

<div id="colorBox" onmouseover="randomColor()" style="width:100px; height:100px; border:1px solid black;"></div>