javascript – jquery中“.on”函数出错

<div id="tour">
 <h2>Paris,France Tour</h2>
 <p>$2,499 for 7 Nights</p>
 <button>See photos from our last tour</button>
 <ul class="photos">
   <li>
   <img src="/assets/photos/paris1.jpg">
   <span>Arc de Triomphe</span>
   </li>
   <li>
  <img src="/assets/photos/paris2.jpg">
  <span>The Eiffel Tower</span>
  </li>
  <li>
  <img src="/assets/photos/paris3.jpg">
  <span>Notre Dame de Paris</span>
  </li>
 </ul>
</div>

这是我的jQuery代码：

function showPhotos()
{
    $(this).find("span").slideToggle();
}

$(document).ready(function() { 
    $("#tour").on("click","button",function() { 
        $(".photos").slideToggle();
    });

    $(".photos").on("mouseenter","li",showPhotos);
    $('.photos').on("mouSELEave",showPhotos);
});

此代码有效,它显示鼠标进入img元素时的跨度.但是,当我尝试做同样的事情时：

function showPhotos()
{
    $(this).find("span").slideToggle();
}

$(document).ready(function() { 
    $("#tour").on("click",function() { 
        $(".photos").slideToggle();
    });
    $(".photos").on("mouseenter",function() {
        showPhotos();
    });
    $('.photos').on("mouSELEave",function() {
        showPhotos();
    });
});

它不起作用.由于我的知识有限,两个代码似乎都在做同样的事情.请帮帮我,第二个代码与第一个代码有什么不同？