Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
//
// Helperfunction to propperly attach an event to an object
//
function addEvent( obj, type, fn )
{
 if (obj.addEventListener)
  obj.addEventListener( type, fn, false );
 else if (obj.attachEvent)
 {
  obj["e"+type+fn] = fn;
  obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
  obj.attachEvent( "on"+type, obj[type+fn] );
 }
}

//
// Main object
//
var highlightsection = {
 
 //
 // Return the level of a heading (or 10 if no heading)
 //
 level : function( tag )
 {
  var m = /^H([0-9])$/.exec( tag );
  if( m ) 
   return parseInt(m[1]);
  else
   return 10;
 },

 hoverover : function()
 {
  var l = highlightsection.level( this.parentNode.tagName );
  var el = this.parentNode.nextSibling;

  while( el != null && highlightsection.level( el.tagName ) > l )
  {
   if( el.nodeType == 1 && el.style )
   {
    el.oldBGcol = el.style.backgroundColor;
    el.style.backgroundColor = '#ddddff';
   }
   el = el.nextSibling;
  }
 },

 hoverout : function()
 {
  var l = highlightsection.level( this.parentNode.tagName );
  var el = this.parentNode.nextSibling;
  
  while( el != null && highlightsection.level( el.tagName ) > l )
  {
   if( typeof(el.oldBGcol) != 'undefined' )
    el.style.backgroundColor = el.oldBGcol;
   el = el.nextSibling;
  }
 },

 install : function()
 {
  var spans = document.getElementsByTagName('span');
  for (var i = 0; i < spans.length; i++) 
  {
   var el = spans[i];
   if(el.className == 'editsection') 
   {
    addEvent( el, 'mouseover', highlightsection.hoverover );
    addEvent( el, 'mouseout', highlightsection.hoverout );
   }
  }
 }

};

$( highlightsection.install );