javascript - jquery 中的 mouseenter 导致异常行为

Question

我正在尝试使 jquery 中的 mouseenter 和 leave 事件正常工作，但似乎没有任何效果。如果我在图像上拖动鼠标而不遍历浏览器上的其他区域，则 mouseenter 会起作用。整个页面如下所示。我必须让 mouseenter 和 mouseleave 事件起作用。

 <%@ Page Language="C#" MasterPageFile="~/UserProfile/MasterPageProfile.master" AutoEventWireup="true" CodeFile="Photos.aspx.cs" Inherits="Photos" Title="Untitled Page" %>

<%-- Add content controls here --%>
<asp:Content runat="server" ID="Content2" ContentPlaceHolderID="head">

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

<script type="text/javascript">google.load("jquery", "1.3.2");</script>

<link href="../.Jsfiles/Default.css" rel="stylesheet" type="text/css" />

<style type="text/css">
    .Images
    {
        padding: 10px;
        border: 1px solid gray;
    }
    #largeImage
    {
        position: absolute;
        border: 5px solid #DDDDDD;
    }
    .SelectionAnimate
    {
        top: 8px;
        left: 8px;
        position: absolute;
        display: none;
        background-color: #EEEEEE;
    }
    .gallery
    {
    }
    .imaginary
    {
    }
    .real
    {
    }




</style>

<script src="../.Jsfiles/SWFUpload.js" type="text/javascript"></script>
<script src="../.Jsfiles/Handler.js" type="text/javascript"></script>
<script src="../.Jsfiles/fileprogress.js" type="text/javascript"></script>
<script src="../.Jsfiles/swfupload.queue.js" type="text/javascript"></script>
<script src="../.Jsfiles/swfupload.speed.js" type="text/javascript"></script>
<script src="../.Jsfiles/swfupload.swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var upload1;
$(document).ready(function() {

    upload1 = new SWFUpload({
        // Backend Settings
        upload_url: "/ProfileTenModified/UserProfile/Photos.aspx",


        // File Upload Settings
        file_size_limit: "102400", // 100MB
        file_types: "*.*",
        file_types_description: "All Files",
        file_upload_limit: "10",
        file_queue_limit: "0",

        // Event Handler Settings (all my handlers are in the Handler.js file)
        file_dialog_start_handler: fileDialogStart,
        file_queued_handler: fileQueued,
        file_queue_error_handler: fileQueueError,
        file_dialog_complete_handler: fileDialogComplete,
        upload_start_handler: uploadStart,
        upload_progress_handler: uploadProgress,
        upload_error_handler: uploadError,
        upload_success_handler: uploadSuccess,
        upload_complete_handler: uploadComplete,
        // Button Settings
        button_image_url: "/ProfileTenModified/Images/XPButtonUploadText_61x22.png",
        button_placeholder_id: "spanButtonPlaceholder1",
        button_width: 61,
        button_height: 22,
        // Flash Settings
        flash_url: "../SWFUploader/swfupload.swf",


        custom_settings: {
            progressTarget: "fsUploadProgress1",
            cancelButtonId: "btnCancel1"
        },

        // Debug Settings
        debug: false
    });

    $('.wrapper').live('mouseenter', function() {
        console.log("flicker");
        $(this).find('.real').next().css("display", "block").next().css({ 'display': 'block', 'top': '30px' });
    });
    $('.wrapper').live('mouseleave', function() {
        var element = $(this).find('.real').next().css("display", "none");
        element.next().css({ 'display': 'none', 'top': '30px' });
    });

});
$('.SelectionAnimate').hover(function() { $(this).css("display", "block"); $(this).next().show(); });

</script>

上传图片

<div style="width:780px;">
    <asp:ListView ID="ListViewThumbs" runat="server"  GroupItemCount="4"
        OnSelectedIndexChanged="ListViewThumbs_SelectedIndexChanged" DataKeyNames="Id"
        OnItemDataBound="ListViewThumbs_ItemDataBound">
        <LayoutTemplate>
            <div id="groupPlaceholder" runat="server" style="">
            </div>
        </LayoutTemplate>
        <GroupTemplate>
            <div id="itemPlaceholder" runat="server" style="">
            </div>
        </GroupTemplate>
        <SelectedItemTemplate>
            <div>
                <asp:Button ID="Button2" runat="server" Text="Select" CommandName="Select" />
                <asp:Image ID="Image1" runat="server" ImageUrl='<%#"~/UserProfile/ImageHandler.ashx?ImID="+ Eval("Id") %>' />
            </div>
        </SelectedItemTemplate>
        <ItemTemplate>
            <div style="float: left; position: relative; margin: 10px;" >
                <div  class="wrapper">
                    <a class="real" href='<%#"/ProfileTenModified/UserProfile/PhotoCross.aspx?in="+ Eval("Full_Image_Name") +"&mi=" + Eval("User_Id") +"&fd="+ Eval("Album")%>'>
                        <asp:Image ID="Image1" runat="server" ImageUrl='<%#"/ProfileTenModified/setP/"+ Eval("Slide_Thumb_Name") +".JPEG" %>'
                            BorderStyle="Solid" BorderWidth="1px" Width="172px" Height="172px" />
                    </a>
                    <asp:LinkButton CssClass="SelectionAnimate" ID="Selection" runat="server" Text="Set as Display"
                        OnCommand="ListViewThums_Selection_Command" CommandName="selection"></asp:LinkButton>
                    <asp:LinkButton CssClass="SelectionAnimate" ID="Deletion" runat="server" Text="Remove"
                        OnCommand="ListViewThumbs_Command"></asp:LinkButton>
                </div>
                <asp:HiddenField ID="HiddenFieldImageId" runat="server" Value='<%#Eval("Id") %>' />
            </div>
        </ItemTemplate>
    </asp:ListView>
</div>

Answer 1

试试这个我修改过的 jsFiddle:http://jsfiddle.net/jjay225/r8PKc/2/ mouseenter 工作正常并且它正确地更改了 css。这是行 $(this).find('.real img').css({'display':'block','top':'30px'});