title: How to simulate css hover pressing a button with javascript? (no jquery)
body: <p>How to simulate css hover pressing a button with javascript? (PURE JS - NO JQUERY)</p>
  
  <p>When "hover" over the div "test" several changes. I want also to press or mouse hover a button that simulates the "hover" on that div.</p>
  
  <p>Example: <a href="http://jsfiddle.net/yFgh5/" rel="nofollow">http://jsfiddle.net/yFgh5/</a>
  UPDATE: <a href="http://jsfiddle.net/yFgh5/6/" rel="nofollow">http://jsfiddle.net/yFgh5/6/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="test1"&gt;red to yellow&lt;/div&gt;
  &lt;div class="test2"&gt;green to blue&lt;/div&gt;
  &lt;div class="test3"&gt;text text text text text&lt;/div&gt;
  &lt;input  type="button" onclick"simulate(document.getElementById('test1'), 'mouseover');" value="Submit" /&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.test1 { background:red; }
  .test2 { background:green; }
  .test3 { font-size:13px; }
  .test1:hover { background:yellow; }
  .test1:hover ~ .test2 { background:blue; }
  .test1:hover ~ .test3 { font-size:20px; }
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>function simulate(element, eventName)
  {
      var options = extend(defaultOptions, arguments[2] || {});
      var oEvent, eventType = null;
  
      for (var name in eventMatchers)
      {
          if (eventMatchers[name].test(eventName)) { eventType = name; break; }
      }
  
      if (!eventType)
          throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');
  
      if (document.createEvent)
      {
          oEvent = document.createEvent(eventType);
          if (eventType == 'HTMLEvents')
          {
              oEvent.initEvent(eventName, options.bubbles, options.cancelable);
          }
          else
          {
              oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
              options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
              options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
          }
          element.dispatchEvent(oEvent);
      }
      else
      {
          options.clientX = options.pointerX;
          options.clientY = options.pointerY;
          var evt = document.createEventObject();
          oEvent = extend(evt, options);
          element.fireEvent('on' + eventName, oEvent);
      }
      return element;
  }
  
  function extend(destination, source) {
      for (var property in source)
        destination[property] = source[property];
      return destination;
  }
  
  var eventMatchers = {
      'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
      'MouseEvents': /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/
  }
  var defaultOptions = {
      pointerX: 0,
      pointerY: 0,
      button: 0,
      ctrlKey: false,
      altKey: false,
      shiftKey: false,
      metaKey: false,
      bubbles: true,
      cancelable: true
  }
  </code></pre>
  
  <p><strong>The difficulty is this. 
  When "mouse hover" on a button (divs structure is all down) this should simulate the "css hover" a top div, in this case "test1". 
  That is, hover on button and simulate the "css hover" to "test1"</strong></p>