Изображение светится при наведении мыши?

Question

Я видел этот эффект, когда, когда мышь находится над изображением, это изображение светится. Я не говорю о свечение границы, я имею в виду цвета на изображении свечение. Я обнаружил, что есть библиотека Pixastic, эффект свечения можно увидеть здесь.

http://www.pixastic.com/lib/docs/actions/glow/

Есть ли способ применить этот эффект при наведении мыши на изображение? Я пытаюсь сделать кнопку, которая светится.

Спасибо!

Answer 1

Вы должны создать событие мыши, как это:

$("img").hover(
  function () {
    Pixastic.process($(this).get(0), "glow", {amount:0.5, radius:1.0});
  }, 
  function () {
    Pixastic.revert($(this).get(0));
  }
);

Первая функция срабатывает, когда вы вводите изображение курсором мыши. Вторая функция вызывается, когда мышь покидает область изображения. Это необходимо для сброса изображения в исходное состояние.

Answer 2

Здравствуйте, вы можете дать эффект свечения изображения при наведении мыши с помощью CSS, а также

пожалуйста, проверьте демо: - http://jsbin.com/inenet/12/edit

или вы можете прочитать учебник по эффектам наведения CSS

Answer 3

Вы ищете что-то подобное?

Кнопка свечения Zurb

Для всех ваших приключений мыши, я хотел бы рекомендовать это

HoverAlls JQuery плагин

Answer 4

Как вы видите в примере Pixastic, demo() Функция вызывается при отправке формы.

function demo() {
    Pixastic.process(document.getElementById("demoimage"), "glow", {
        amount : $("#value-amount").val(),
        radius : $("#value-radius").val()
    });
}

Итак, вы включаете glow.js в вашем проекте и вызовите эту функцию при наведении курсора.

$('img.myimage').hover(function() {
    Pixastic.process($(this), "glow", {
        amount : 0.5,
        radius : 0.5
    });
}, function() {
    Pixastic.process($(this), "glow", {
        amount : 0,
        radius : 0
    });
});

Или же revert() как образец показывает