jQuery функция при наведении (on hover)

Что необычного в этой функции? Она работает даже с AJAX.

Как в jQuery написать функцию для наведения

Рассмотрим обычную функцию, которая меняет бекграунд при наведении на элемент:

$(".col-product-bg").hover(function(){
	var imgurl = $(this).data("image");
	$(this).css("background-image", "url(" + imgurl + ")")
}, function(){
	$(this).css("background-image", "");
});

Всё в ней в принципе нормально, но, если на сайте есть подгрузка при помощи AJAX, то для новых элементов она уже не работает.

Решение – переписать всё под mouseenter и mouseleave, а обработчик события закрепить за document -> “.col-product-bg”.

$(document).on({
	mouseenter: function () {
		var imgurl = $(this).data("image");
		$(this).css("background-image", "url(" + imgurl + ")")
	},
	mouseleave: function () {
		$(this).css("background-image", "");
	}
}, ".col-product-bg");

Теперь jQuery функция отлично меняет background-image и при этом у нас есть больше вариативности для стилей. Используй мы просто CSS такой гибкости добиться было бы сложно.