0

使用 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>

任何帮助将非常感激。

谢谢，果酱

4

2 回答 2

2

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

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

于 2012-07-02T16:20:05.100 回答
0

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

例子

我认为使用选择器（如）可能有更好的方法+，但这有效。

于 2012-07-02T15:15:24.073 回答