2 Replies - 397 Views - Last Post: 28 March 2018 - 12:07 PM

#1 Foobarer   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 269
  • Joined: 28-March 17

Buggy hover using show() and hide()

Posted 28 March 2018 - 09:14 AM

I have an image 'drop-down' - when you hover with mouse over an image it should display a larger image of it, with some details below (with help from w3 schools).
But I changed it a bit, so instead of the drop down immediately opening when mouse is hovering it using CSS :hover, I wanted it to: delay 1 second if mouse is hovering it, then display the drop-down content,and as long as the mouse is inside the newly shown div, it should not hide it, and when the mouse is out of either the div or the image, hide the content again, but it's really buggy: many times the opened content div just stays, or doesn't want to go on time, just acting weird. can't find out why it's so glitchy

        <style>
            .dropdown {              
                position: relative;
                display: inline-block;
            }

            .dropdown-content {
                display: none;
                position: absolute;
                background-color: #f9f9f9;
                min-width: 160px;
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                z-index: 1;
            }



            .desc {
                padding: 15px;
                text-align: center;
            }
        </style>


        <h2>Dropdown Image</h2>
        <p>Move the mouse over the image below to open the dropdown content.</p>

        <div class="dropdown hover">
            <img src="image.png" alt="Description here" width="100" height="50">
            <div class="dropdown-content">
                <img src="image.png" alt="Description here" width="300" height="200">
                <div class="desc">Description here</div>
            </div>
        </div>

        <script>
            $(document).ready(function () {
                $(".hover").hover(function () {
                    $(this).children(".dropdown-content").delay( 1000 ).show(0);
                }, function () {
                    $(this).children(".dropdown-content").hide();
                });
            });
        </script>




This post has been edited by Foobarer: 28 March 2018 - 09:24 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Buggy hover using show() and hide()

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2334
  • View blog
  • Posts: 7,113
  • Joined: 15-January 14

Re: Buggy hover using show() and hide()

Posted 28 March 2018 - 10:28 AM

For one, you're not checking where the mouse is after that 1 second, you're just showing the other content 1 second after they hover regardless of where the mouse is now.
Was This Post Helpful? 1
  • +
  • -

#3 Foobarer   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 269
  • Joined: 28-March 17

Re: Buggy hover using show() and hide()

Posted 28 March 2018 - 12:07 PM

Yep I thought it might cause some trouble, but, the second parameter of the hover function is a handler that acts as on mouse over:

Quote

handlerOut
Type: Function( Event eventObject )
A function to execute when the mouse pointer leaves the element.


And, I didn't figure out yet why, but in the code above, perhaps because the hidden div pops in sort of new window, then as long as the mouse is on this "un-hidden" div, then it won't call the handlerOut unless you take your mouse over that div.
I found a fix(with some help): you add a .stop() before each call, like so:
    $(document).ready(function () {
        $(".hover").hover(function () {
            $(this).children(".dropdown-content").stop().delay( 1000 ).show(0);
        }, function () {
            $(this).children(".dropdown-content").stop().hide();
        });




Today I learned that the hover triggers count how many times you hover and sort of putting them in queue, or something like that, so you need to zero this by using .stop()

This post has been edited by Foobarer: 28 March 2018 - 12:09 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1