控制悬停区域和 CSS 图像精灵答案

【问题标题】：Controlling hover area and CSS image sprites控制悬停区域和 CSS 图像精灵
【发布时间】：2012-07-02 13:54:47
【问题描述】：

使用 CSS 图像精灵，我正在创建一个“交互式”图像，将鼠标悬停在某些区域上会改变图像的一部分。一切正常，但在悬停区域上方时无法控制悬停区域。

例如，假设主区域为 400x400 像素，悬停区域为距左上角 100x100 的像素。当您进入悬停区域时，要显示的“新”图像为 200x200。这会出现，但随后此“新”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>

任何帮助将不胜感激。

谢谢，果酱

【问题讨论】：

标签： css image hover sprite

【解决方案1】：

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

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

【讨论】：

感谢 Jen - 我使用 + 选择器按照您的建议减少了代码。

【解决方案2】：

好吧，我有一个解决方案。 “掩盖”您不希望它触发的部分（例如：使用空 div）。通过这样做，它将不再悬停在对象上。

Example

我认为使用selectors（如+）可能有更好的方法，但这是可行的。

【讨论】：