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

1

background size影响背景的大小（奇怪的是），但不影响实际元素的大小。

如果元素上有悬停功能，那么悬停功能仍将应用于整个元素，无论您如何显示背景图像。

如果您希望悬停效果仅应用于背景图像覆盖的区域，那么您需要将整个元素的大小调整为该大小，而不仅仅是背景图像。

于 2013-06-08T21:34:31.987 回答