Untitled

Change the div background when onmouseover another div
.one:hover ~ .two {background:salmon;}

.one:hover ~ ul .three {background: lightblue;}

document.getElementById('XYZ').onmouseover = function(){
    //Do stuff here
}

<div class="div1"></div>
<div class="div2"></div>

.div2 {
    background: #FFF url(/path/to/mouseOUTImage) top left no-repeat;
 }
 .div2MouseOver {
    background: #FFF url(/path/to/mouseOVERImage) top left no-repeat;
 }

$('.div1')
.mouseenter(function() {
  $('.div2').addClass('div2MouseOver');
})
. mouseleave(function() {
  $('.div2').removeClass('div2MouseOver');
});

(function () {

    //change the value of div1 with your first div box
    var div1 = document.getElementById('div1');
    var div2 = document.getElementById('div2');
    var defBC = div2.style.backgroundColor;

    addEventHandler(div1, 'mouseover', function () {
        div2.style.backgroundColor= 'black';
    });

    addEventHandler(div1, 'mouseout', function () {
        div2.style.backgroundColor= defBC;
    });


    function addEventHandler(el, eType, handler) {
        if (el.addEventListener) { // W3C, FF
            el.addEventListener(eType, handler, false);
        } else if (el.attachEvent) { // IE
            el.attachEvent('on' + eType, function() {
                handler.call(el);
            });
        }
    }

})();

var bgcolor;
$("#id_of_first_div").hover(function(){
      bgcolor = $("#id_of_div_2").css('backgroundColor');
      $("#id_of_div_2").css('backgroundColor', '#ffcc00');
   },
   function(){
      $("#id_of_div_2").css('backgroundColor', bgcolor);
});