Привет, ребята, я написал этот скрипт jQuery, который выделяет любой элемент на странице (путем изменения цвета фона). Это умный маленький скрипт, который сэкономит вам много времени, если у вас есть много элементов, требующих событий наведения мыши.
Характеристики
- Укажите цвет фона для наведения при наведении мыши на элемент
- Сохраняет цвет фона, когда мышь покидает элемент
использование
демонстрация
Следующим элементам div присвоены class = ”displayItem” и наведен курсор на оранжевый фон.
Прозрачные фоны (только в FireFox)
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Нун ес нулла лео. Proin ligula nunc, lacinia pellentesque bibendum ac.
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Нун ес нулла лео. Proin ligula nunc, lacinia pellentesque bibendum ac.
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Нун ес нулла лео. Proin ligula nunc, lacinia pellentesque bibendum ac.
Цветные фоны (все браузеры)
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Нун ес нулла лео. Proin ligula nunc, lacinia pellentesque bibendum ac.
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Нун ес нулла лео. Proin ligula nunc, lacinia pellentesque bibendum ac.
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Нун ес нулла лео. Proin ligula nunc, lacinia pellentesque bibendum ac.
jQuery.hoverHighlight ()
Я протестировал скрипт в разных браузерах и исправил ошибку IE6 и IE7 (они не поддерживают метод jQuery.data, поэтому я кодировал значение по умолчанию для тех браузеров, которые его не поддерживают). Так что теперь это работает во всех браузерах.
Вам также понадобится этот скрипт для преобразования цветов из RGB в Hex .
/* * Create Hover Backgound Highlight for any element. * Retains original background-color. */ $.fn.extend({ hoverHighlight: function (colour) { $(this).live('mouseenter', function() { /*save original background colour*/ if ($(this).css('background-color') && $(this).css('background-color') !== 'transparent') { $(this).data('bgColour',rgb2hex($(this).css('background-color'))); } else { $(this).data('bgColour','transparent'); } $(this).css('background-color',colour); }).live('mouseleave', function() { var defaultBg = 'transparent'; var changeBg = ($(this).data('bgColour') !== null) ? $(this).data('bgColour') : defaultBg; $(this).css('background-color',changeBg); }); return this; /*enable jQuery chaining*/ } });