Search code examples
javascriptjqueryasp.netcssajaxcontroltoolkit

jQuery, JavaScript, Work with 3 elements on Hover


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.


Solution

  • 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.