Issue with Hover Persisting despite Sortable Plugin Usage

Question

Issue with Hover Persisting despite Sortable Plugin Usage

I wrote a script that works perfectly in Chrome, but I'm running into issues with IE8:

Here is my jQuery code:

$("<div class='divButtons'></div>").appendTo( $(".widget_header") );
$(".divButtons").text("321");

This is the CSS I'm using:

.divButtons { background:orange; display:none; }
.widget:hover .divButtons { display:block; }

Check out my jsFiddle for the full demonstration:

Click here to view the jsFiddle.

What's working:

Currently, when I hover over a .widget, the .divButtons appears due to the CSS styling. Moving one widget to another keeps everything functioning smoothly as intended. However, in IE8, there's a problem not present in Chrome.

The issue:

In IE8, when I hover over a .widget and then move it to a different part of the screen before releasing it, the .divButtons continues to display on the initial .widget even though I'm no longer hovering over it. This discrepancy doesn't occur in Chrome.

Seeking solution:

Is there a way to ensure this functionality behaves correctly in IE8, similar to how it does in Chrome?

jquery css jquery-ui html jquery-ui-sortable

Answer 1

Answer №1

There appears to be a bug in IE8 where the mouseout or mouseleave events are not triggered when an element is moved away from under the mouse cursor. This results in the :hover state not being removed and prevents event listeners for mouseout, hoverleave, etc in jQuery from being called.

To address this issue, I have implemented a solution that checks if any .column element is being hovered over when a .widget is released. If no columns are detected as being hovered, the hover state is removed from the widget.

A .hover class is applied to the .widget element to manage this workaround since removing the :hover state directly using jQuery is not feasible.

jsFiddle Demo:

For a demonstration of the fix in action, you can visit this jsFiddle link.

CSS Code:

.widget.hover .divButtons { display:block; }

jQuery Code:

// Handling hover states for columns
$('.column').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

// Controlling hover behavior for widgets
$('.widget').hover(function() {
    $('.widget.hover').removeClass('hover');
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

jQuery Sortable Implementation:

$( ".column" ).sortable({
    connectWith: ".column",
    tolerance: 'pointer',
    // Executing code on widget drop event
    stop: function(event, ui) {
        // Delay execution by 1 millisecond after widget drop
        setTimeout(function() {
            // Checking if any widget is currently hovered
            if ($('.widget.hover').size() > 0) {
                // Removing hover class if parent column is not hovered
                if (!$('.widget.hover').first().parent().is('.hover')) {
                    $('.widget.hover').removeClass('hover');
                }
            }
        }, 1);
    }
});

I trust this solution will be effective for your needs.

It's frustrating that even in 2012, we still encounter such challenges due to bugs in older versions of Internet Explorer.

Answer 2

There appears to be a bug in IE8 where the mouseout or mouseleave events are not triggered when an element is moved away from under the mouse cursor. This results in the :hover state not being removed and prevents event listeners for mouseout, hoverleave, etc in jQuery from being called.

To address this issue, I have implemented a solution that checks if any .column element is being hovered over when a .widget is released. If no columns are detected as being hovered, the hover state is removed from the widget.

A .hover class is applied to the .widget element to manage this workaround since removing the :hover state directly using jQuery is not feasible.

jsFiddle Demo:

For a demonstration of the fix in action, you can visit this jsFiddle link.

CSS Code:

.widget.hover .divButtons { display:block; }

jQuery Code:

// Handling hover states for columns
$('.column').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

// Controlling hover behavior for widgets
$('.widget').hover(function() {
    $('.widget.hover').removeClass('hover');
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

jQuery Sortable Implementation:

$( ".column" ).sortable({
    connectWith: ".column",
    tolerance: 'pointer',
    // Executing code on widget drop event
    stop: function(event, ui) {
        // Delay execution by 1 millisecond after widget drop
        setTimeout(function() {
            // Checking if any widget is currently hovered
            if ($('.widget.hover').size() > 0) {
                // Removing hover class if parent column is not hovered
                if (!$('.widget.hover').first().parent().is('.hover')) {
                    $('.widget.hover').removeClass('hover');
                }
            }
        }, 1);
    }
});

I trust this solution will be effective for your needs.

It's frustrating that even in 2012, we still encounter such challenges due to bugs in older versions of Internet Explorer.

Answer 3

Answer №2

Would you consider using the hover pseudo-class instead of this alternative?

CSS

.widget.hover  .divButtons { display:block; }

JS

$('.widget').hover(function(e){
    $(e.currentTarget).addClass('hover');
},function(e){
    $(e.currentTarget).removeClass('hover');
});

Answer 4

Would you consider using the hover pseudo-class instead of this alternative?

CSS

.widget.hover  .divButtons { display:block; }

JS

$('.widget').hover(function(e){
    $(e.currentTarget).addClass('hover');
},function(e){
    $(e.currentTarget).removeClass('hover');
});

Answer 5

Answer №3

Encountering a similar issue with IE9 where it tends to get stuck in a hover state if the DOM element is changed before mouseout occurs.

Without finding a concrete solution for this behavior, I decided to use jQuery's .hover() method instead of the :hover pseudoclass, as shown here:

$(elt).hover(function () {
    $(this).addClass("jHover");
}, function () {
    $(this).removeClass("jHover");
});

Although not as flashy, it proves to be more reliable in handling the issue.

Answer 6

Encountering a similar issue with IE9 where it tends to get stuck in a hover state if the DOM element is changed before mouseout occurs.

Without finding a concrete solution for this behavior, I decided to use jQuery's .hover() method instead of the :hover pseudoclass, as shown here:

$(elt).hover(function () {
    $(this).addClass("jHover");
}, function () {
    $(this).removeClass("jHover");
});

Although not as flashy, it proves to be more reliable in handling the issue.

Answer 7

Answer №4

When it comes to applying hover styles, Internet Explorer can be a bit unreliable, especially on elements other than anchors.

It seems that IE doesn't properly redraw an item when it's moved across the DOM, and it also fails to reset the hover state unless the mouse re-enters the area. One workaround for this issue is to clone the dragged item instead of using it directly.

To address this problem, you can make use of the sortable() method and specify the following option:

$( ".row" ).sortable({
    connectWith: ".row",
    tolerance: 'pointer',
    helper: 'clone' // added
});

Answer 8

When it comes to applying hover styles, Internet Explorer can be a bit unreliable, especially on elements other than anchors.

It seems that IE doesn't properly redraw an item when it's moved across the DOM, and it also fails to reset the hover state unless the mouse re-enters the area. One workaround for this issue is to clone the dragged item instead of using it directly.

To address this problem, you can make use of the sortable() method and specify the following option:

$( ".row" ).sortable({
    connectWith: ".row",
    tolerance: 'pointer',
    helper: 'clone' // added
});

Issue with Hover Persisting despite Sortable Plugin Usage

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

To use Jquery draggable, make sure you are running either Jquery minimum version 1.5.0 or version 1.7

Ways to adjust the dimensions of an SVG icon in a React application

Conceal anchor tag depending on the destination URL

What steps can be taken to confirm that a comment posted on a specific post is genuine and related to that post?

Issue with tab focus causing dropdown menu to be unresponsive

JavaScript is reliant on the presence of the alert() function to properly function

Incorporating fancybox on a dynamically loaded AJAX page

Chrome's CSS columns cannot contain iframes without causing them to escape their

Tips for creating a flexible video layout using HTML

Utilizing Bootstrap and flexbox to create a card: repositioning the image to the left or right

Issues with border removal due to overflow content in CSS and AngularJS

Is it possible to trigger an AJAX call once the AJAX file uploader has finished uploading?

develop a dynamic visualization tool using javascript to track steps during page transitions

Unique title: "Curved Blocks with Unusual Shapes in SVG Path

html/css: Collapse container in a horizontal list due to white spaces

What is the best way to paste plain text into a Textarea without any formatting?

What is the best way to update the color of an fa icon when an error message is displayed using PHP

The custom styles in Material-Table are taking precedence over all other styling, including Material UI styles, and causing icons to not

Adjust the height of an iframe dynamically according to the content within using JQUERY/Javascript

Number input field failing to update value upon pressing 'enter'