Mouse over implementation

Changes the CSS background color of another element when hovering over a certain element

by Alan Guerrero

HTML

<div class="bgtoggle">
</div>

CSS

.bgtoggle{
    position: absolute;
    width: 56px;
    height: 43px;
    right:65px;
    top:170px;
    color:#fff;
    font-size: 3em;
    cursor:pointer;
    z-index:9999;
    /*background-image: url("../images/mthc/bgtoggle.png");*/
    background-color: red;
    background-size: 100%;
}

.bgtoggle:hover{
    background-color: blue;
}

JavaScript

jQuery(document).ready(function(){
        jQuery(".bgtoggle").mouseover(function () {
            jQuery("body").css("background-color", "yellow");
        });
        jQuery(".bgtoggle").mouseout(function () {
            jQuery("body").css("background-color", "white");
        });
    });