【问题标题】：jQuery, JavaScript, Work with 3 elements on HoverjQuery，JavaScript，在 Hover 上使用 3 个元素
【发布时间】：2011-11-13 21:09:30
【问题描述】：

我的问题接近这个问题： jQuery onmouseover + onmouseout / hover on two different divs

但是，我使用的是 3 个元素而不是 2 个。我正在做的是隐藏 AsyncFileUpload 控件 (AjaxControlToolkit) 并使用与 FileUpload 重叠的 <div>。然后我将 FileUploads 不透明度设置为 0，但 z-index 比 <div> 高。所以只有<div> 显示并且如果用户点击该div.. 那么他们将点击AsyncFileUpload 控件，因为它具有更高的z-index。

不管怎样，这里有一些代码：

    <asp:Image ID="myProfilePicture" ClientIDMode="Static" runat="server" />
    <div id="pic_tools">
        <ajaxToolkit:AsyncFileUpload ID="ImageUpload" CssClass="myProfileUpload" OnClientUploadStarted="ClientUploadStarted"
            OnClientUploadComplete="ClientUploadComplete" OnUploadedComplete="ImageUpload_UploadedComplete"
            Width="216px" runat="server" />
            <div class="FakeUploader">Click me to upload</div>
    </div>

        $(function () {
            $('#myProfilePicture, #myProfileUpload, .FakeUploader').hover(function () {
                $(".FakeUploader").show();
            }, function () {
                $('.FakeUploader').hide();
            });
        });

一切都按预期工作，但是当鼠标在 .FakeUploader 上时（实际上它在 #myProfileUpload（实际的 asyncfileupload 控件）上）。FakeUpload 被隐藏。

注意：#myProfileUpload 和 .FakeUpload 两个控件都有 display:none;另外，我正在测试上面的 JS 代码，但没有设置 display:none;在#myProfileUpload 上。

所以我的问题是：当鼠标进入#myProfilePicture 时，如何显示.FakeUpload 和#myProfileUpload (opacty:0)。然而，当鼠标悬停在#myProfileUpload 下的.FakeUpload 时，它们仍然会同时显示。当然，将它们都隐藏在 Mouseout 上。

提前致谢。

更新

如果您最终在这里寻找类似问题的答案。确保您没有像我那样编写#myProfileUpload，因为它不存在。我用 .myProfileUpload 替换了它，它按原样工作。

【问题讨论】：

如果您解决了您的问题，请写下答案并将其标记为已接受 :)

标签： javascript jquery asp.net css ajaxcontroltoolkit

【解决方案1】：

如果您最终在这里寻找类似问题的答案。确保您没有像我那样编写#myProfileUpload，因为它不存在。我用 .myProfileUpload 替换了它，它按原样工作。

【讨论】：