jQuery, JavaScript，工作与3元素悬停

jQuery, JavaScript, Work with 3 elements on Hover

本文关键字：元素 悬停 工作 JavaScript jQuery      更新时间：2023-09-26

我的问题接近这个问题:jQuery onmouseover + onmouseout/hover在两个不同的div

然而，我使用3个元素而不是2个。我正在做的是隐藏AsyncFileUpload控件(AjaxControlToolkit)，并使用重叠的FileUpload的<div>。然后我将FileUploads的不透明度设置为0，但具有比<div>更高的z-index。所以只有<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代码没有设置显示:none;# myProfileUpload。

我的问题是:我如何显示。fakeupload和#myProfileUpload(不透明度:0)，当鼠标进入#myProfilePicture。然而，当鼠标在。fakeupload上时，它们仍然显示在#myProfileUpload下。当然，还可以在Mouseout中隐藏它们。

提前感谢。

<标题> 更新

如果你最终在这里寻找类似问题的答案。确保你没有像我一样写#myProfileUpload，因为它不存在。我将它替换为。myprofileupload，它就能正常工作了

如果你最终在这里寻找类似问题的答案。确保你没有像我一样写#myProfileUpload，因为它不存在。我将它替换为。myprofileupload，它就能正常工作了

相关文章：