css - 控制悬停区域和 CSS 图像 Sprite

Question

使用 CSS 图像 Sprite ，我正在创建一个“交互式”图像，其中将鼠标悬停在特定区域上会更改图像的一部分。一切正常，但一旦您越过悬停区域，就很难控制悬停区域。

例如，假设主区域为 400x400 像素，悬停区域为距左上角 100x100。当您进入悬停区域时，要显示的"new"图像为 200x200。这会出现，但随后这个"new"200x200 图像变为事件状态；然后我可以在这个新图像中的任何地方移动(比如说 150x150)并且悬停图像仍然存在，即使现在我已经离开了 100x100 的原始悬停区域。有什么方法可以限制这种情况，即使显示 200x200 的悬停图像，事件区域也始终为 100x100？

我的(缩减)CSS (areaTest.css) 是:

#bigArea {
    width: 400px;
    height: 400px;
    background: url(areaImage.jpg) no-repeat;
    margin: 10px auto; padding: 0;
    position: relative;
}

#bigArea li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    position: absolute;
}
#bigArea a {
    display: block;
    text-indent: -9999px;
    text-decoration: none;
}

#littleArea {
    width: 100px;
    height: 100px;
}
#littleArea a {
    width: 100px;
    height: 100px;
}
#littleArea a:hover {
    width: 200px;
    height: 200px;
    background: url(areaImage.jpg) 0px -410px no-repeat;
}

我的 HTML 是:

<link href="areaTest.css" rel="stylesheet" type="text/css">
<div>
    <ul id="bigArea">
        <li id="littleArea"><a href="#"></a></li>
    </ul>
</div>

如有任何帮助，我们将不胜感激。

谢谢，果酱

Answer 1

我 fork 了 Kyomu 的解决方案并应用了相反的方法:http://jsfiddle.net/FEkcx/

<a>是一个位于 <div> 之上的空 block 实际上有背景图像。使用 #littleArea a:hover + div 触发悬停.