HoverMaster - Testing

Simple colour hover plugin

by Ben Watts

HTML

<div id="banner-message">
    <p>Hello World</p>
    <button class="hover-master" data-hover-colour="#FF00FF">Change color</button>
    <button class="hoverMe" data-hover-colour="#FF00FF">Change color</button>
</div>

CSS

body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
}

#banner-message {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    font-size: 25px;
    text-align: center;
    transition: all 0.2s;
    margin: 0 auto;
    width: 300px;
}

button {
    background: #0084ff;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
}

#banner-message.alt {
    background: #0084ff;
    color: #fff;
    margin-top: 40px;
    width: 200px;
}

#banner-message.alt button {
    background: #fff;
    color: #000;
}

JavaScript

$.fn.HoverMaster = function(currentElement) {
    var THIS = this;
    var $THIS = $(THIS);

    THIS.standardColour = THIS.css('background-color');
    THIS.hoverColour = THIS.data('hover-colour');

    console.log(THIS.css('background'));
    console.log(THIS.hoverColour);

    $THIS.on('mouseover', function() {
        $THIS.css('background-color', THIS.hoverColour);
    });

    $THIS.on('mouseout', function() {
        $THIS.css('background-color', THIS.standardColour);
    });
}

$('.hover-master').HoverMaster();


function HoveMaster(currentElement) {
    var THIS = currentElement[0];
	console.log(THIS);
    THIS.standardColour = THIS.style.backgroundColor;
    THIS.hoverColour = THIS.dataset.hoverColour;
    
    console.log(THIS.standardColour);
    console.log(THIS.hoverColour);
    
	THIS.onmouseover = function(){
    	THIS.style.backgroundColor = THIS.hoverColour;
    }

	THIS.onmouseout = function(){
    	THIS.style.backgroundColor = THIS.standardColour;
	}
}

HoveMaster(document.getElementsByClassName('hoverMe'));