Jquery 仅在图像上悬停

我是网页设计新手，这是我的第一个问题（对不起，如果有错的话），目前我正在进行一个项目，我允许用户使用telerik:RadAsyncUpload上传文档

用户可以上传：多达图像（jpg、jpef、png）和文件（docx、doc、pdf）。为了动态显示上传的文件，我正在使用asp:Repeater

在这里，我的问题是，我如何只在用户上传的图像上应用“悬停”，即当我在图像上悬停时，它应该生效。当我将鼠标悬停在任何类型的文件（pdf、docx、doc）上时，鼠标悬停不应适用。这是我想通过使用Jquery实现的。我有个主意，也就是说

首先获取上传的文件并将其扩展名存储在varibale中

比较类型

如果文件类型=jpg、png、jpeg->hover

如果文件类型=pdf，则doc，docx->不应悬停

这是我的密码 JQUERY

$(function () {
var filename = $("#rptFileUpload").val();
var extension = filename.replace(/^.*\./, '');
if (extension == filename) {
    extension = '';
} else {
     extension = extension.toLowerCase();
}

$(document).ready(function () {
      imagePreview();
    });
  this.imagePreview = function () {
     xOffset = 200;
     yOffset = -50;

  switch (extension) {
      case 'jpg':
      case 'jpeg':
      case 'png':               

           $('div.thumbnail-item').hover(function (e) {
                $(this).css('z-index', '15')
                .children("div.tooltip")
                .css("top", (e.pageY - xOffset) + "px")
                .css("left", (e.pageX + yOffset) + "px")
                .fadeIn("fast");
           })
          .mousemove(function (e) {                                   
                 x = e.pageX - $(this).offset().left;
                 y = e.pageY - $(this).offset().top;

                 $(this).children("div.tooltip")
                 .css("top", (e.pageY - xOffset) + "px")
                 .css("left", (e.pageX + yOffset) + "px");
           })

           .mouseleave(function () {
                  $(this).css('z-index', '1')
                  .children("div.tooltip")
                  .animate({ "opacity": "hide" }, "fast");
           });                            

    };

            case 'pdf':
            case 'docx':
            case 'doc':

                code : should not hover
        }

aspx代码

<telerik:RadAsyncUpload ID="UploadDocument" runat="server" MaxFileInputsCount="5" ChunkSize="3145728" Width="300px"></telerik:RadAsyncUpload>
<asp:LinkButton runat="server" ID="btnUpload" OnClick="btnUpload_Click" Text="Upload"></asp:LinkButton>
<asp:Repeater runat="server" ID="rptFileUpload" OnItemDataBound="rptFileUpload_ItemDataBound" OnItemCommand="rptFileUpload_ItemCommand">
<ItemTemplate>
    <div class="thumbnail-item thumbnail-item1">
 <a href="#">
   <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# "~/Partners/Thumbnails/" + Eval("ThumbnailImage") %>' CommandName="Download" CssClass="thumbnail" Width="100" Height="90" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"ID") %>' /></a>

    <div class="tooltip">
        <span class="overlay"></span>
            <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl='<%#  "~/Partners/Attachments/" + Eval("ThumbnailImage") %>'  CommandName="Download" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"ID") %>' Width="200" Height="185" />
 </div>

---

最简单的解决方案是向css添加自定义类，如

.img hover

，并检查上传的文件是否为图像。如果这是真的，请附加自定义类

该类可以是：

 .img-hover:hover {
      background: #999;
 }

这个类将在悬停时改变背景。不需要javascript