Как сделать, чтобы при движении мыши курсор выполнял функцию маски изображения?

Question

[Vizuality]

Есть 2 картинки (А\Б). Картинка А постоянно видна, нужно, чтобы при наведения курсора область вокруг курсора (допустим круг 100х100 px) показывала картинку Б. Выражаясь графическим языком - нужно прикрутить к курсору свойства маски изображения. Спасибо!

Comments

[Dimonchik]

а вы такое видели хоть в каком браузере?

Answer 1

[Karpion]

Надо отслеживать движения мыши - и на место курсора помещать блок кода DIV, содержащий картинку. Примерно как при перетаскивании картинки мышкой - только без нажатия на кнопку.
Ну, если я правильно понял задачу.

Answer 2

[zhen4ek]

Можно сделать с использованием jquery.
Нужно повесить на круг ивент, чтобы отлавливать наведение курсора и менять свойства картинки(например display)
Или сделать на чистом css с использованием + или ~ (если между елементами есть другие елеменнты)

<div id="a">Div A</div>
<div id="b">Hover me</div>
<div id="c">Div B</div>

#a {
  width: 100px;
  height: 100px;
  background-color: #000;
 z-index: 1;
}
#c {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
}
#b:hover ~ #c {
    display: inline;
}