I have a menu bar with categories, when I hover a certain category a large drop down appear under it with subcategories.
I have already created it, you can see it here http://www.bootply.com/9Qz14HIz8R
Now when I hover the category its background change to gray, and when I move the cursor down to the subcategory drop down the grey background on the category is gone.
I want to find a way to make the category background gray when hovered, and then when I move the cursor to the subcategory drop down, i want the category to remain in gray background.
And when i move the cursor outside the subcategories drop down box then the category background will be gone.
I want to know what is the best way to achieve this.
I'm thinking that using js or jquery we can make the category active on hover and keep it active once cursor is on the subcategories drop down but make it inactive when the cursor moves out of the drop down box.
Any idea on how to solve this or if you suggest a different approach to achieve it.
Add class name .active and on hover add style name to .services-shortcut
<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 want to use .on() method do this:
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);
}
);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments