title: JavaScript - Set onmouseover for multiple elements without using :hover
body: <p>Is there any way I can do this by not using :hover and by not adding "onmouseover and onmouseout" in all elements, like an effective way in a script witch sets onmouseover and onmouseout for all input elements.</p>
  
  <p>NOTE: Please try with JavaScript before trying with JQuery</p>
  
  <hr>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
  
      &lt;title&gt;123&lt;/title&gt;
  
      &lt;style&gt;
  
      .button {
      color: red;
      }
  
      .button:hover {
      color: blue;
      }
  
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div&gt;
  
          &lt;input class="button" type="button" value="1"&gt;
  
          &lt;input class="button" type="button" value="2"&gt;
  
          &lt;input class="button" type="button" value="3"&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>