0 
#main{
position: relative;
height: 60px;   
}

#exit{
float: left;
background: url(exit.jpeg) no-repeat;
width: 230px;
height: 230px;
background-size: 60px 60px;
opacity: .5;
}


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="wrap">

        <!-- TOP -->
        <header id="main">
            <a href="#" id="exit"></a>
            <h1>Temp</h1> 
        </header>

        <!-- MENU -->
        <nav id="menu">
            <ul>
                <li><a href="#">temp 2</a></li>
                <li><a href="#">temp 3</a></li>
                <li><a href="#">temp 4</a></li>
                <li><a href="#">temp 5</a></li>
            </ul>
        </nav>


    </div>
</body>
</html>

これは機能しますが、本来の方法ではありません。写真のサイズが変更されますが、ホバーすると、サイズ変更前の写真の場所にマウスを移動することもでき、ホバー機能は引き続き呼び出されます。

4

1 に答える 1