Управление облаками наведения и изображениями изображений CSS

Question

Использование спрайта с изображением CSS Я создаю «интерактивное» изображение, где зависание над определенными областями изменяет часть изображения. Все работает нормально, но борется с возможностью контролировать область зависания, когда вы находитесь над областью зависания.

Например, скажем, что основная область составляет 400x400 пикселей, а область взвода - 100x100 в верхнем левом углу. Когда вы переходите в область наведения, «новое» изображение для отображения - 200x200. Это появляется, но тогда это «новое» изображение 200x200 становится активным; Затем я могу перемещаться в любом месте этого нового изображения (скажем, 150x150), и изображение наведения все еще присутствует, хотя теперь я вышел из первоначальной области наведения 100x100. Есть ли способ сдерживать это, чтобы активная область всегда была 100x100 даже при отображенном паре с изображением 200x200?

Мой (урезанным) 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

я раздвоенный решение Kyomu и применил обратное: http://jsfiddle.net/FEkcx/

<a> является пустой блок, который находится на вершине <div>, что на самом деле имеет фоновое изображение. Наведение запускается с использованием #littleArea a:hover + div.

Answer 2

Ну, у меня есть решение. «Скрыть» часть, которую вы не хотите запускать (например: с пустыми div). Делая это, он больше не будет парить над объектом.

Example

Я думаю, что может быть лучше, используя selectors (как +), но это работает.