我的问题接近这个问题: jQuery onmouseover + onmouseout / hover on two different divs
但是,我使用的是 3 个元素而不是 2 个。我正在做的是隐藏 AsyncFileUpload 控件 (AjaxControlToolkit) 并使用 <div>
重叠 FileUpload。
然后我将 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 代码。在#myProfileUpload 上。
所以我的问题是: 当鼠标进入#myProfilePicture 时,如何显示 .FakeUpload 和 #myProfileUpload (opacty:0)。然而,当鼠标悬停在 #myProfileUpload 下的 .FakeUpload 上时,它们仍然会同时显示。当然,将它们都隐藏在 Mouseout 上。
提前致谢。
更新
好吧,如果您最终来到这里是为了寻找类似问题的答案。确保您没有像我一样写#myProfileUpload,因为它不存在。我用 .myProfileUpload 替换了它,它按原样工作。
最佳答案
好吧,如果您最终来到这里是为了寻找类似问题的答案。确保您没有像我一样写#myProfileUpload,因为它不存在。我用 .myProfileUpload 替换了它,它按原样工作。
关于javascript - jQuery、JavaScript、在 Hover 上使用 3 个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8103060/