title: Remove div on hover
body: <p>I have this HTML structure:</p>
  
  <pre><code> &lt;div class="shadow"&gt;&lt;/div&gt;
  &lt;div id="slide_img"&gt;
    &lt;ul class="clearfix"&gt;
     &lt;li&gt;&lt;img src="themes/company/img/01.png"&gt;&lt;/li&gt;
     &lt;li&gt;&lt;img src="themes/company/img/02.png"&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;img src="themes/company/img/03.png"&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;img src="themes/company/img/04.png"&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;img src="themes/company/img/05.png"&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;img src="themes/company/img/01.png"&gt;&lt;/li&gt;  
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>shadow div on my img and get opacity effect. But when hover on img, remove this shadow div.</p>
  
  <p>shadow CSS:</p>
  
  <pre><code>.shadow {
    background: none no-repeat scroll center center #000000;
    height: 250px;
    left: 0;
    margin: 0;
    opacity: 0.7;
    padding: 0;
    position: absolute;
    width: 1838px;
    z-index:2;
  }
  </code></pre>
  
  <p>How can i do this via jQuery?</p>