jquery - 仅悬停在图像上

Question

我是网页设计的新手，这是我的第一个问题(抱歉，如果有任何错误)目前我正在做一个元素，我允许用户使用 telerik:RadAsyncUpload 上传文档.

用户可以上传:尽可能多的图像(jpg、jpef、png)和文件(docx、doc、pdf)。要动态显示上传的文件，我正在使用 asp:Repeater。

我的问题是，我如何才能仅在用户上传的图片上应用“悬停”，即，当我将鼠标悬停在图片上时它应该生效。当我将鼠标悬停在任何类型的文件(pdf、docx、doc)上时，鼠标悬停不适用。我想通过使用 Jquery 来做到这一点。我有想法，即，

1. 首先获取上传的文件并将其扩展名存储在varibale中
2. 比较类型。
3. 如果文件类型 = jpg,png,jpeg -> 悬停
4. 如果文件类型 = 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>

Answer 1

最简单的解决方案是向您的 css 添加自定义类，例如 .img-hover，如果上传的文件是图像，则检查您的逻辑。如果这是真的，附加自定义类。

这个类可以是:

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

此类将在悬停时更改背景。不需要 javascript。