title: jquery change image path on div hover and make its class active?
body: <p>I have a div structure like this :-</p>
  
  <pre><code>&lt;div class="row margin-bottom-20"&gt;
      &lt;div class="col-md-3 service-box-v1" id="div1"&gt;
          &lt;div&gt;&lt;a href="#"&gt;&lt;img src="path" id="img1" /&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;h2&gt;abc&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 service-box-v1" id="div2"&gt;
          &lt;div&gt;&lt;a href="#"&gt;&lt;img src="path" id="img2" /&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;h2&gt;def&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 service-box-v1" id="div3"&gt;
          &lt;div&gt;&lt;a href="#"&gt;&lt;img src="path" id="img3" /&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;h2&gt;ghi&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 service-box-v1" id="div4"&gt;
          &lt;div&gt;&lt;a href="#"&gt;&lt;img src="path" id="img5"&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;h2&gt;jkh&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On pageload I want to assign class active to div1 and change img1 path and when user hovers on div2 its class become active and img2 path changes and div1 active class removes and img1 comes to its old source. </p>
  
  <p>I ave tried this :-</p>
  
  <pre><code> $("#div1").mouseover(function () {
          old_src = $("#img1").attr("src");
          $("#img1").attr("src", "path");
      }).mouseout(function () {
          $("#img1").attr("src", old_src);
  
      });
  </code></pre>
  
  <p>But in this case I have to do this for every div. I need suggesions for a generic code rather than doing this for every div seperately. </p>