My problem is close to this issue: jQuery onmouseover + onmouseout / hover on two different divs
However, I am using 3 elements instead of 2. What I'm doing is hiding the AsyncFileUpload control (AjaxControlToolkit) and using a <div> overlapping the FileUpload.
I then just set the FileUploads opacity to 0 but with a higher z-index than the <div>. So only <div> shows and if the user clicks on that div.. Well they will be clicking ont he AsyncFileUpload control since it has a higher z-index.
Anyway, here's some code:
<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();
});
});
Everything works as expected but when the mouse is over .FakeUploader (in reality it's over #myProfileUpload (The actual asyncfileupload control)) .FakeUpload is hidden.
Note: both controls #myProfileUpload and .FakeUpload have display:none; Also, I was testing the JS Code above wihtout setting display:none; on #myProfileUpload.
So my question is: How can I show .FakeUpload and #myProfileUpload (opacty:0) when mouse enters #myProfilePicture. Yet still have them BOTH shown when the mouse is over .FakeUpload which is under #myProfileUpload. And of course hide them both on Mouseout.
Thanks in advance.
UPDATE
Well if you end up here looking for an answer to a similar issue. Make sure you didn't write #myProfileUpload like I did because it doesn't exist. I replaced it with .myProfileUpload and it's working as is.
