title: jQuery div overlay on hover
body: <p><a href="http://jsfiddle.net/bGa34/" rel="nofollow">Here is a simplified example of what it is</a>.
  All I want is to make one gray div on its hover. However, everything becomes in gray. And I don't understand why.</p>
  
  <p>The code is below:</p>
  
  <pre><code>&lt;style&gt;
  #myclient &gt; li{
      display: inline-block;
      width:140px;
      margin-right:10px;
  }
  #myclient &gt; li a{
      border: 1px solid red;
      display: block;
      height: 222px;
      position: relative;
  }
  #myclient &gt; li img{
      max-height: 100px;
      max-width: 100px;
      vertical-align: middle;
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
  }
  .myhover{
      background-color: rgba(50,50,50,1);
      position: absolute;
      height: 100%;
      width: 100%;
      overflow: hidden;
      top: 0;
      left: 0;
      display: none;
  }
  &lt;/style&gt;
  &lt;ul id="myclient"&gt;
      &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;
          &lt;div class="myhover" style="display: none; opacity: 1;"&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;
          &lt;div class="myhover" style="display: none; opacity: 1;"&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;
          &lt;div class="myhover" style="display: none; opacity: 1;"&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;
          &lt;div class="myhover" style="display: none; opacity: 1;"&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;
          &lt;div class="myhover" style="display: none; opacity: 1;"&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;script&gt;
  $(document).ready(function(){
      $("#myclient").on("mouseenter", "li", function(){                       
          $(this).find('.myhover').fadeIn(400);
      }).on("mouseleave", "li", function(){   
          $(this).find('.myhover').stop().fadeOut(100);
      })  
  });
  &lt;/script&gt;
  </code></pre>