Question

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

非常感谢任何帮助。

谢谢，Jam

Answer 1

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

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

Answer 2

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

Example

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

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

2 个答案: