Instructions for activating an element on hover and keeping it active while hovering over a particular div

I've implemented a menu bar with categories that reveal subcategories in a dropdown when hovered over.

You can view the functionality I've already created here: http://www.bootply.com/9Qz14HIz8R

Currently, when hovering over a category, its background changes to gray. However, as soon as you move the cursor down to the subcategory dropdown, the gray background disappears from the category.

I am looking for a way to keep the category background gray even when moving the cursor to the subcategory dropdown, and only remove it when the cursor is outside the dropdown box.

I believe using JavaScript or jQuery to make the category remain active on hover and stay active while the cursor is on the subcategories dropdown would be the solution. It should then deactivate once the cursor moves out of the dropdown box.

If you have any ideas on how to solve this issue or if you suggest a different approach, I'd love to hear them.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

To activate the class .active and apply a style change to .services-shortcut on hover

<style>
.services-shortcut {
    -webkit-transition: background-color 500ms linear 200ms;
    -o-transition: background-color 500ms linear 200ms;
    transition: background-color 500ms linear 200ms;

}
.services-shortcut:hover,
.services-shortcut.active {
    color: #555;
    background: none repeat scroll 0% 0% #ddd;
}
</style>

<script>
jQuery('div.dropdown').hover(function() {
    jQuery(this).find('.services-shortcut').addClass('active');
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
    jQuery(this).find('.services-shortcut').removeClass('active');
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
</script>

If you prefer using the .on() method, follow these steps:

jQuery('div.dropdown').on(
    'mouseenter', function () {
        jQuery(this).find('.services-shortcut').addClass('active');
        jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
    },
    'mouseleave', function () {
        jQuery(this).find('.services-shortcut').removeClass('active');
        jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
    }
);

Answer №2

Give this a shot:

Cascading Style Sheets (CSS):

.category-overlay{
    width:1190px;
    height:90px;
    background:#ddd;
    margin-top:30px;
}

.services-shortcut {
   color: #555;
   background: none repeat scroll 0% 0% #ddd;
}

HyperText Markup Language (HTML):

<div class="container">
   <div class="row">
      <div class="col-xs-12">
          <h1></h1>    
          <div class="category-box">
              <div class="dropdown" class="">
                 <a href="HTTP://GOOGLE.COM" target="_blank" style="width: 12.5%; float: left;" data-toggle="dropdown">
                    <div data-category>
                       <i class="fa fa-bullhorn fa-3x"></i>
                       <h5>CATEGORY 1</h5>
                    </div>
                 </a>
                 <div class="dropdown-menu category-overlay">
                    <a href="#">Action 1</a>
                 </div>
              </div>
              <div class="dropdown">
A similar pattern of code repeats for categories 2 through 8...

JQuery Method:

jQuery('div.dropdown').hover(function() {

      jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

$('div[data-category]').mouseenter(function(){
$(this).addClass('services-shortcut');    
})

$('div[class=dropdown]').mouseleave(function(){
$(this).find('div[data-category]').removeClass('services-shortcut');
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for creating a tab logo?

Is there a way to create a personalized logo to appear next to the website title on the tab? Whenever I see a logo displayed beside the website title in my browser tabs, I can't help but wonder how it's done. ...

javascripthtmlcss

Unveiling the Magic: Displaying Quill's raw HTML in Vue.js

Within my Vue.js app, I am utilizing the Quill editor to generate raw HTML content that is saved directly to the database without any cleaning. When fetching this content from the backend, the text and styling are displayed correctly (colors, bolding, etc. ...

javascriptvue.jsvuejs2quillvue-quill-editor

Exploring the Implementation of Multiple Form Validations in SharePoint using PreSaveAction

My knowledge of Javascript is limited to what I can gather from online resources. Currently, I'm facing a challenge with a SharePoint form where I need to set up specific validations that trigger when a user hits the "Save" button. The validations I& ...

javascriptjquerysharepoint

Exploring the differences between server-side rendering and client-side rendering in Express using Pug

I find myself in a state of confusion when it comes to distinguishing between what is considered client-side and server-side. Currently, as I develop a website using Pug for my HTML pages without any external files being loaded into the client's brows ...

javascriptnode.jspug

Looking to verify a disabled select element and adjust the opacity of that element when it is disabled

$_product = $this->getProduct(); $_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes()); ?> <?php if ($_product->isSaleable() && count($_attributes)):?> <dl> <?php foreach($_attrib ...

javascriptjqueryhtmlcssmagento-1.9

In PHP forms, ensure that only completed textboxes are submitted and empty textboxes are discarded

I've created a form that displays all available products from a database along with their prices. Users can input the quantity they want to purchase for each product, and upon submission, the total amount will be calculated. There are 5 products in th ...

javascriptphphtml

In the Bootstrap grid, the first two rows are tightly packed with no empty space between them

Currently working on coding a footer with a grid/table using Bootstrap 4. However, encountering an issue where there's no spacing between the first and second rows in the grid. Oddly enough, there is spacing between all other columns. Can anyone provi ...

cssbootstrap-4

The significance of order when evaluating 2 Date Objects

While working with Date objects, I encountered something peculiar. When comparing two Date objects - let's call them a and b, the expressions a > b and b < a yield different results. Check out this JSFiddle for an example. var u = Date(2014,7, ...

javascript

Having trouble using Vue v-show along with v-for to conceal a v-list menu

I have been attempting to hide an admin menu by utilizing the v-show directive. Even though the value of isAdmin is false in the code snippet below, the menu continues to be displayed. I have also experimented with using v-if, but it doesn't seem to w ...

javascriptvue.jsconditional-rendering

Exploring AngularJS: When to Choose Directives Over Controller-specific Code in Unique Situations

Currently, I am faced with a practical case that I consider to be theoretical. The task at hand involves working on a single page application (SPA) with multiple partials (currently 3) and a dynamic menu that transitions through various states to create a ...

javascriptangularjscontrollerdirective

Retrieving and storing successful response data in Angular JS using the $http service caching

My dataFactory is set up to retrieve posts in a simple manner: dataFactory.getPosts = function () { if (this.httpPostsData == null) { this.httpPostsData = $http.get("http://localhost/matImms/wp-json/posts?type=journey&filter[posts_per_page ...

javascriptangularjsionic-framework

Tips for aligning a single iframe with two other iframes

I have a total of 3 iframes: iframe_top, iframe_left, and iframe_right. My goal is to display the two iframes iframe_left and iframe_right side by side. In addition, I want the iframe iframe_top positioned above them in a way that aligns the left border ...

htmlcssiframe

Exploring the synergies of Next.js and Node.js thread pooling

In my current project, I am utilizing nextJS with NodeJS and looking to implement child processes or workers. The code provided by NextJS itself is functioning perfectly. The relevant code snippets: NextJS with NodeJS Another resource I referred to: Nex ...

javascriptnode.jsnext.js

Is it possible to use jQuery to swap out HTML code?

Here is a code snippet that I am working with: <ul class="breadcrumbs-wrapper"> <li>Link A (one)</li> <li>Link A <span style="font-size:10px">(two)</span></li> <li>Link B</li&g ...

htmljquerystringreplace

Extracting information from <a> to modal via e.relatedTarget can occasionally result in an "undefined" output

I'm working on a button that triggers a modal in Laravel Blade. The issue I'm facing is that sometimes the data passed to the modal does not appear, resulting in an undefined variable. Here's my current script: <script> $(&apos ...

jquerylaravelbootstrap-4bootstrap-modal

What could be causing the repetitive output in an Angular click event loop?

I am facing an issue while trying to log the data of the user based on the user tab that has been clicked. The problem is that it always displays the same data and not the data of other users. https://i.sstatic.net/ACo7y.png For example, when I click on ...

javascriptangulartypescriptdynamicchat

When using the SASS @debug directive, it has the ability to display two distinct values for a single variable

Encountering an issue while compiling a scss file to css, the error message reads as follows: Error: src/scss/_custom.scss Error: Incompatible units: 'rem' and 'px'. To address this, I inserted @debug directives above the problematic ...

csssass

In React Native, you can pass native component properties as props, while also defining custom ones using a TypeScript interface

I am working on a component called AppText where I need to utilize a Props interface and also be able to accept additional props that can be spread using the spread operator. However, I encountered this error: Type '{ children: string; accessible: tru ...

javascriptreactjstypescriptreact-native

(HTML)(PHP)Restricting Access to Login Page

My user page is the only one being accessed for both users and admins. Within my database and table, each are divided by 'type', where 0 represents a user and 1 represents an admin. Here is my code: <?php session_start(); include 'dbcon. ...

phphtmlmysqlweb

Passing a variety of values from child to parent component in Angular through a unified function

Utilizing a checkbox-component within a parent component, I have implemented an @Output() to notify the parent component when the value changes. While my code is currently functional, using the checkbox-component multiple times throughout my project has l ...

javascriptangulartypescript