responsiveBlock

jQuery Plugin Example http://bit.ly/2k97ajI

by Aleksander Trofimov

HTML

<div>Блок на странице</div>

CSS

div {
    padding: 10px;
    margin:  5px;
    border:  3px solid red;
}

JavaScript

(function($){
  jQuery.fn.responsiveBlock = function(options){
    options = $.extend({
      defColor: "white", // цвет элемента над которым нет курсора
      hoverColor: "red"
    }, options);

    var make = function(){
      // здесь переменная this будет содержать отдельный DOM-элемент, к которому и нужно будет применить воздействия плагина
      $(this).css({ background: options.defColor })
             .mouseenter( function(){
                 $(this).css({
                   background: options.hoverColor
                 });
             })
             .mouseleave( function(){
                 $(this).css({
                   background: options.defColor
                 });
             });
    };

    return this.each(make);
  };
})(jQuery);



$(document).ready(function(){
    $('div').responsiveBlock();
});