title: JavaScript / jQuery mouseover event with delay
body: <p>I have a code that allows me to show hidden divs after a little delay on mouseover, my problem now is that im not very good with CS, i have elements in that div with that code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var timer;
    var delay = 250;
    $("#content1").mouseover(function() {
      timer = setTimeout(function() {
        $("#content.left1").css("display", "block");
      }, delay);
    });
    $("#content1").mouseout(function() {
      $("#content.left1").css("display", "none");
      clearTimeout(timer);
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.txtmiddle {
    border: 1px solid rgba(215, 215, 215, 0.1);
    background-color: rgba(245, 245, 245, 0.7);
    margin-top: 5px;
    opacity: 0.6;
    filter: alpha(opacity=60);
    padding: 2%;
    border-radius: 15px;
    position: relative;
    overflow: auto;
    -webkit-animation: fadeIn 0.1s;
    animation: fadeIn 0.1s;
  }
  .txtmiddle:hover {
    border: 1px solid rgba(55, 55, 55, 0.2);
    background-color: rgba(255, 255, 255, 0.9);
    opacity: 1;
    filter: alpha(opacity=100);
  }
  #content {
    display: none;
    background: rgba(255, 255, 255, 0.9);
    padding: 15px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
  }
  #txtleft {
   width: 30%;
   float: left;
   margin-left: 4%;
   border-top: 1px solid rgba(0, 0, 0, 0.0);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div id="txtleft"&gt;&lt;div id="content" class="left1"&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit a&lt;/div&gt;  &lt;/div&gt;
    &lt;div id="middlewrapper"&gt;&lt;div class="txtmiddle" id="content1"&gt;
    &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Nuvola_mimetypes_info.png/100px-Nuvola_mimetypes_info.png" id="midcontentleft"&gt;
    &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Nuvola_mimetypes_info.png/100px-Nuvola_mimetypes_info.png" id="midcontentimgright" class="1"&gt;
  &lt;/div&gt;  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>cant get it to run here.... but its working fine my only problem is now that everytime i hover over elements (those images) in the div the hidden content is (re-)shown again (with that delay) (before i didnt had the delay so the hidden element wouldnt disapear and apear again and one couldnt notice the change...</p>