Using jQuery to remove the 'active class' when the mouse is not hovering

Question

Using jQuery to remove the 'active class' when the mouse is not hovering

I recently came across this amazing jQuery plugin for creating slide-out and drawer effects:

However, I encountered a problem. I want to automatically close the active 'drawer' when the mouse is not hovering over any element. The jQuery plugin currently keeps the active drawer open until the mouseover event occurs on another drawer element. How can I make all the drawers close when none of them are being hovered over?

Here is my initialization code:

$(function () {
    $('UL.drawers').accordion({
        // specify the drawer handle
        header: 'H2.drawer-handle',

        // define our selected class
        selectedClass: 'open',

        // trigger the effect on mouseover
        event: 'mouseover'
    });
});

In addition, I noticed that when I add the 'open' class to the drawer element's CSS (.drawer-handle.open {}), the color animation for the active drawer handle does not function as expected. Any thoughts on why this might be happening? I am using PHP within Joomla 1.7.

Thank you in advance!

jquery css jquery-plugins

Answer 1

Answer №1

Here's a partial solution that may help you:

$(function() {
    var $accordion = $('UL.drawers').accordion({
        // define the drawer handle
        header: 'H2.drawer-handle',
        
        // chosen class for open state
        selectedClass: 'open',
        
        // triggering event for Apple slide out effect
        event: 'mouseover',
        
        // option to close all drawers (default is "true" - keep one open always)
        alwaysOpen: false
    }).activate(false);

    $('UL.drawers').mouseout(function () {
        // close all drawers when mouse exits parent list
        $accordion.activate(false);
    });
});

This solution is labeled as partial because it may not be as smooth as desired, but it should give you a good starting point in the right direction.

You can test it on this jsFiddle link: http://jsfiddle.net/gKNGh/1/

Answer 2

Here's a partial solution that may help you:

$(function() {
    var $accordion = $('UL.drawers').accordion({
        // define the drawer handle
        header: 'H2.drawer-handle',
        
        // chosen class for open state
        selectedClass: 'open',
        
        // triggering event for Apple slide out effect
        event: 'mouseover',
        
        // option to close all drawers (default is "true" - keep one open always)
        alwaysOpen: false
    }).activate(false);

    $('UL.drawers').mouseout(function () {
        // close all drawers when mouse exits parent list
        $accordion.activate(false);
    });
});

This solution is labeled as partial because it may not be as smooth as desired, but it should give you a good starting point in the right direction.

You can test it on this jsFiddle link: http://jsfiddle.net/gKNGh/1/

Using jQuery to remove the 'active class' when the mouse is not hovering

Answer №1

Similar questions

Move the scroll event binding from the parent element to the child element

Combining ASP.NET with jQuery to create dynamically generated HyperLink controls

Diagram with Cascading Style Sheets and Hypertext Markup Language

Why don't media queries take effect

Photographs housed within a pop-up window

What is the best way to apply CSS to a single div without affecting the rest of the code?

Using jQuery with an SVG map may result in issues with the URL hash not updating correctly

Leveraging ajax for showcasing page content in a floating div container

The art of layering images: How to stack one image on top of another

Display an icon to act as a separator between icons in CSS styling

Obtain the HTML representation of an anchor tag containing an onclick

Creating a jquery DataTable from HTML generated by angular $sce can be done by following these steps

Ajax pagination does not update the currently active link

Toggling javascript functionality based on media queries

Exploring the Dynamic Trio: JQuery, Datatables, and the Power

Convert the HTML content into a PDF while retaining the CSS styles using either JavaScript or Django

Angular2 Components with Unique Styling

Video tag with centered image

Shutting down the jQuery pop-up

What is the best way to display a PDF in a web browser using a JavaScript byte array?