title: mouseenter not working on div img
body: <p>making own slider using jquery
  first list images from folder to div with class .list then using mouseenter to show each image in div id #show.
  but mouseenter not working on ('.list img').
  where is the problem?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;link rel='stylesheet' href='css/style.css' /&gt;
  &lt;script type="text/javascript" src="js/jquery.min.1.6.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;
      &lt;div id="show"&gt;&lt;/div&gt;
  
      &lt;div id="right"&gt;right&lt;/div&gt;
      &lt;div id="left"&gt;left&lt;/div&gt;
  
      &lt;div id="listwapper"&gt;
          &lt;div class="list"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.list
  {
  
      height:100px;
  }
  .list img
  {
      width:98px;
      height:96px;
      border-right:1px solid #ffa800;
      border-left:1px solid #ffa800;
      border-bottom:2px solid #ffa800;
      border-top:2px solid #ffa800;
      border-radius:0px;
      cursor:pointer;
  }
  #listwapper
  {
      position:relative;
      height:100px;
      width:500px;
      overflow-y: hidden;
      overflow-x: hidden;
  }
  #right
  {
      float:right;
  }
  #left
  {
      float:left;
  }
  #container
  {
      width:500px;
      border:1px solid #000;
      margin:20px;
  }
  #show,#show img
  {
      width:500px;
      height:300px;
      background-size:100% 100%;
      background-repeat:no-repeat;
  }
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>$().ready(function(){
          var dir = "http://localhost/slider/images";
          var imageswidth = 0;
          $.ajax({
            url: dir,
            success: function(data){
               $(data).find("a:contains(.jpg)").each(function(){
                  // will loop through 
                  var images = $(this).attr("href");
                  $('.list').append('&lt;img class="image" src="'+ dir + '/' + images +'"&gt;&lt;/img&gt;');
                  imageswidth = imageswidth + 100;
                  $(".list").css("width", imageswidth);
               }); 
            }
          });
  
  
          $('#right').mouseenter(function(){
              interval1 = setInterval(function(){
                  $("#listwapper").animate({scrollLeft: '+=300'}, 500);
              },500);
  
          });
  
          $('.list img').mouseenter(function(){
              var imageUrl = $(this).attr("src");
              $('#show').css('background-image', 'url("' + imageUrl + '")');
          });
  
  
          $('#right').mouseleave(function(){
              clearInterval(interval1);
          });
  
          $('#left').mouseenter(function(){
              interval2 = setInterval(function(){
                  $("#listwapper").animate({scrollLeft: '-=300'}, 500);
              },500);
          });
  
          $('#left').mouseleave(function(){
              clearInterval(interval2);
          });
  
  });
  </code></pre>