Question

我是网页设计新手，这是我的第一个问题（抱歉，如果有任何错误）目前我正在开发项目，我允许用户使用telerik上传文档：RadAsyncUpload

用户可以上传：图片（jpg，jpef，png）和文件（docx，doc，pdf）。要动态显示上传的文件，我使用的是asp：Repeater。

我的问题是，我怎样才能在用户上传的图像上应用“悬停”，即当我将鼠标悬停在图像上时应该会有效。当我将鼠标悬停在任何类型的文件（pdf，docx，doc）上时，悬停不应该适用。我想通过使用Jquery来做到这一点。我有点想法，

首先获取上传的文件并将其扩展名存储在varibale中
比较类型。
如果文件类型= jpg，png，jpeg - ＆gt;悬停
如果文件类型= pdf，doc，docx - ＆gt;不应该盘旋

这是我的代码的 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。

仅悬停在图像上

1 个答案: