Вывести на передний план и зажечь с Raphael.js - PullRequest
Новая
       1

Вывести на передний план и зажечь с Raphael.js

3 голосов
/ 31 января 2012

РЕДАКТИРОВАТЬ: После написания моего вопроса мне пришло в голову, что код toFront(), вероятно, воссоздает элемент в другой позиции в DOM. Когда он сначала удаляет элемент, он, вероятно, теряет все события, связанные с IE и Opera, поэтому моя проблема. Я буду работать над альтернативой делегированного события, но все еще открыта для предложений.

У меня есть фигуры в бумаге Рафаэля, которые должны светиться при наведении на них курсора. Тем не менее, поскольку эти фигуры расположены непосредственно рядом друг с другом, чтобы убедиться, что вы видите свечение по всему периметру, я должен вывести текущую фигуру вперед.

Этот текущий элемент находится сверху, поэтому его свечение появится поверх соседних фигур. Мой код отлично работает в Webkit и Firefox, но не работает в Opera или IE.

После того, как я добавил код ввода в начало, событие mouseout никогда не сработало, как в Opera / IE.

Пожалуйста, посмотрите мой пример на JS Fiddle, который не работает для Opera / IE . Если вы закомментируете строку toFront(), она вызовет событие mouseout, как и ожидалось во всех браузерах.

В этом примере - поскольку рычажки мышки получают триггер, то есть свечение остается - на каждую фигуру накапливается несколько свечений. Я могу это исправить, проверив светимость перед добавлением, но это не решает проблему.

РЕДАКТИРОВАТЬ 2: Итак, я придумала решение, которое использует одну переменную для хранения объекта свечения , которое, похоже, решает проблему. Интересно, что событие mouseout на содержащем div на самом деле не вызывается в Opera (не проверял IE). Оууууу, так близко: (

1 Ответ

5 голосов
/ 31 января 2012

Это работает для меня в Opera, не пробовал в IE, но должно работать: 

paper.forEach(function(element) {
    element.hover(function() {
       if (!glow) {
           this.toFront();
           glow = this.glow({ color: "#555", width: 10 });
       }
    },
    function(){
       glow.remove();
       glow = false;        
    }             
);
});

http://jsfiddle.net/76bjf/

...