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

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

Привет, вы можете дать эффект Image Glow on Mouse Hover с 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() как образец показывает