Как позиционировать курсор при наведении курсора на основе положения элемента

Question

Пожалуйста, смотрите следующее jsfiddle: http://jsfiddle.net/bhellman1/Na3hd/11/

Прямо сейчас, когда вы двигаетесь над коробкой, ховербокс появляется в одном и том же месте для всех предметов.

То, что я хотел бы сделать, это расположить поле для наведения на основе того, на какой # box.corner вы наведете курсор. Если # box.corner находится слева от поля, я бы хотел, чтобы поле наведения слева, за пределами поля находилось по центру в углу .... Если навести курсор мыши на # box.corner, который находится внизу Хорошо, я бы хотел, чтобы поле для наведения отображалось внизу справа, по центру угла.

Есть идеи, как этого добиться?

Спасибо

Answer 1

Если я правильно прочитал ваш вопрос, это должно быть именно то, что вы ищете: http://jsfiddle.net/Na3hd/17/

Как вы можете видеть, я переместился по некоторым CSS, чтобы больше соответствовать общим элементам, так чтокод может быть легко использован повторно и назначен другим элементам.Я перенес определение hoverbox в функцию mouseenter, так что при каждом вводе мышью создается новый div, что не приведет к осложнениям при настройке позиций.

Надеюсь, это поможет!

РЕДАКТИРОВАТЬ

Вот более динамичный подход: http://jsfiddle.net/Na3hd/22/

Кроме того, я только что понял, что вы хотите, чтобы эти элементы отображались вне рамок.