Develop Reference

Synchronized Bootstrap Carousel code, from jQuery to Vanilla Javascript

I found this Fiddle that synchronizes two Bootstrap Carousels, it's what I'm looking for but it's using jQuery; I want to reduce it to Vanilla Javascript.
The error in Console is Cannot read properties of null (reading 'length') -- I think I'm getting this error because there is no "next sibling element" for the last element. I'm unfamiliar with jQuery and learning Javascript, so I'm not sure how to fix the code.
Also, is there a Javascript equivalent of jQuery's .siblings() method? And is Javascript's .cloneNode() method equivalent to jQuery's clone()? Thank you.
(function() {
// Initalize the "slide" title
var carouselHeader = document.querySelector('#carousel-text>h3')
carouselHeader.innerHTML = carouselHeader.getAttribute('slide-title');
var items = document.querySelectorAll('.carousel[ data-type="multi"] .item');
items.forEach(function(e, i, items) {
var next = items[i].nextElementSibling;
if (!next.length) {
console.log(next)
}
})
})();
/*** More jQuery to Reduce ***/
/* $('.carousel[ data-type="multi"] .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 4; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function () {
activeslide = $(this).find('.active');
$('#carousel-text>h3').text(activeslide.data('slide-title'));
$('#numberCarousel').carousel(activeslide.index());
}); */
#numberCarousel {
padding: 40px;
}
#numberCarousel .carousel-inner {
margin-left: 0;
}
#numberCarousel .item {
text-align: center;
cursor: pointer;
}
#numberCarousel .item .col-xs-2 {
background-color: #fff;
}
#numberCarousel .carousel-inner>.next {
left: 16.66666667%;
}
#numberCarousel .carousel-inner>.prev {
left: -16.66666667%;
}
#numberCarousel .carousel-inner>.next.left,
#numberCarousel .carousel-inner>.prev.right {
left: 0;
}
#numberCarousel .carousel-inner>.active.left {
left: -16.66666667%;
}
#numberCarousel .carousel-inner>.active.right {
left: 16.66666667%;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
.carousel-control {
width: 10%;
}
#numberCarousel .carousel-control .icon-prev,
#numberCarousel .carousel-control .icon-next {
transform: translate(0, -50%);
}
<div class="container-fluid" id="slider">
<div class="row">
<div class="col-xs-12">
<div id="carousel-text">
<h3></h3>
</div>
<!--/#carousel-text-->
</div>
<!-- /.col-xs-12 #slider -->
<div class="col-xs-12 hidden-xs carousel slide" data-type="multi" id="numberCarousel">
<div class="carousel-inner row">
<div class="item active">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="0">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">1</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="1">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">2</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="2">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">3</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="3">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">4</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="4">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">5</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="5">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">6</i>
</span>
</a>
</div>
</div>
</div>
<!-- /.carousel-inner.row -->
<a class="left carousel-control" href="#numberCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#numberCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /#numberCarousel -->
<div class="col-xs-12" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="active item" data-slide-title="State 1">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 2">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 3">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 4">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 5">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 6">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
</div>
<!-- /.carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev">back</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next">next</span>
</a>
</div>
<!-- /#myCarousel -->
</div>
<!-- /#carousel-bounding-box -->
</div>
<!--/.row-->
</div>
<!--/.container-fluid-->

How do I set a background image in a website after having divs placed?

I am trying to set a picture for the background of a homepage on my website. How can I do this if I previously had just background colors set? I want the picture to run in the first div and the navigation.
Here is what it looks like currently:
home page link
here is the code for it.
.body{
background-image: url("https://material.angular.io/assets/img/examples/shiba2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.first-box{
grid-area: first-box;
align-content: center;
padding: 65px 300px;
background-color: transparent;
}
<div class="navigation">
<ul>
<li><a href="index.html">
<div class="icon">
<i class="fa fa-home"></i>
</div>
<div class="name" data-text="fa-home">Home</div>
</a>
</li>
<!--I have used icons with the navigations as it makes it easier for dyslexic people to navigate. -->
<li><a href="tryhelp.html">
<div class="icon">
<i class="fa fa-magic"></i>
</div>
<div class="name" data-text="fa-magic">Try our solutions </div>
</a>
</li>
<li><a href="emergency-contacts.html">
<div class="icon">
<i class="fa fa-child"></i>
</div>
<div class="name" data-text="fa-child">Emergency Contacts</div>
</a>
</li>
<li><a href="learnmore.html">
<div class="icon">
<i class="fa fa-book"></i>
<!--place it in the center in css, this is a self reminder (delete later)-->
</div>
<div class="name" data-text="fa-book">Learn More</div>
</a>
</li>
<div class="logo">
<img class="img1" src="photos/logo2.png" alt="the logo">
</div>
</div>
<!--navigation ends here-->
<div class="first-box">
<div class="intro intro1">Welcome!</div>
<div class="intro intro2">
<span class="sub-head "> We care about you</span>
<span class="sub-head inactive">becuase you matter</span>
<!-- lol dramatic effect-->
</div>
</div>
I have tried putting the image in the body of the file in CSS and making the other divs transparent for the background but it still doesn't seem to work.

You have written style for .body class not for body tag. Either you have to change as tag style or you need to add a class body in your body tag.
body{
background-image: url("https://material.angular.io/assets/img/examples/shiba2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.first-box{
grid-area: first-box;
align-content: center;
padding: 65px 300px;
background-color: transparent;
}
<div class="navigation">
<ul>
<li><a href="index.html">
<div class="icon">
<i class="fa fa-home"></i>
</div>
<div class="name" data-text="fa-home">Home</div>
</a>
</li>
<!--I have used icons with the navigations as it makes it easier for dyslexic people to navigate. -->
<li><a href="tryhelp.html">
<div class="icon">
<i class="fa fa-magic"></i>
</div>
<div class="name" data-text="fa-magic">Try our solutions </div>
</a>
</li>
<li><a href="emergency-contacts.html">
<div class="icon">
<i class="fa fa-child"></i>
</div>
<div class="name" data-text="fa-child">Emergency Contacts</div>
</a>
</li>
<li><a href="learnmore.html">
<div class="icon">
<i class="fa fa-book"></i>
<!--place it in the center in css, this is a self reminder (delete later)-->
</div>
<div class="name" data-text="fa-book">Learn More</div>
</a>
</li>
<div class="logo">
<img class="img1" src="photos/logo2.png" alt="the logo">
</div>
</div>
<!--navigation ends here-->
<div class="first-box">
<div class="intro intro1">Welcome!</div>
<div class="intro intro2">
<span class="sub-head "> We care about you</span>
<span class="sub-head inactive">becuase you matter</span>
<!-- lol dramatic effect-->
</div>
</div>

Class is not added by jQuery

I need to add dark overlay to images by adding class imgoverlay using jQuery.
$("#featured .row .col-sm img").hover(
function() {
$(this).addClass('imgoverlay');
},
function() {
$(this).removeClass('imgoverlay');
}
);
.imgoverlay {
height: 100%;
background-color: rgba(18, 15, 65, 0.7);
z-index: 2000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="main" id="featured" data-aos="fade-up">
<div class="container">
<div class="d-flex justify-content-between justify-content-end" data-aos="fade-up">
<div>
<span class="sub-title"><p align="right" data-aos="fade-left" data-aos-duration="3000"> مشاريع مميزة </p></span>
</div>
<div>
<a href="#">
<p align="right"><strong> مشاريعنا الأخرى<i class="fas fa-arrow-left"></i></strong></p>
</a>
</a>
</div>
</div>
<!-- Gallery start -->
<div class="row ">
<div class="col-sm">
<a href="">
<div class="thumb1"><img name="Auoya" src="assets/images/thumb1resize.jpg" alt=""></div>
</a>
<a href="">
<div class="thumb1"><img name="capitalHeights" src="assets/images/thumb2resize.jpg" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb2"><img name="hai-sakani" src="assets/images/thumbMiddleresize.jpg" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb1"><img name="bosco" src="assets/images/thumb3resize.jpg" alt=""></div>
</a>
<a href="">
<div class="thumb1"><img name="armonia" src="assets/images/thumb4resize.jpg" alt=""></div>
</a>
</div>
</div>
</div>
</section>

Pure CSS
You can use pseudo element ::after or ::before, no need to use JS or jQ just add a global class and set hover effect on ::after and active it on :hover
.thumbs:hover::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(18, 15, 65, 0.7);
}
.thumbs {
width: 150px;
height: 150px;
overflow: hidden;
border: 1px solid red;
position: relative;
}
<section class="main" id="featured" data-aos="fade-up">
<div class="container">
<div class="d-flex justify-content-between justify-content-end" data-aos="fade-up">
<div>
<span class="sub-title"><p align="right" data-aos="fade-left" data-aos-duration="3000"> مشاريع مميزة </p></span>
</div>
<div>
<a href="#">
<p align="right"><strong> مشاريعنا الأخرى<i class="fas fa-arrow-left"></i></strong></p>
</a>
</a>
</div>
</div>
<!-- Gallery start -->
<div class="row ">
<div class="col-sm">
<a href="">
<div class="thumb1 thumbs"><img name="Auoya" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
<a href="">
<div class="thumb1 thumbs"><img name="capitalHeights" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb2 thumbs"><img name="hai-sakani" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb1 thumbs"><img name="bosco" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
<a href="">
<div class="thumb1 thumbs"><img name="armonia" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
</div>
</div>

Background image opacity [duplicate]

This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
Closed 5 years ago.
I have a section in my HTML that has a background image attached to it through the CSS. The background image goes across the entire screen and is outside the container div which the text resides in. However, every time I change the opacity of the background image so it's very light and subdued, the opacity also changes the text as well (because the background image is tied to the section id). How do I re-work this so that the background image is very faint and the text is strong in the fore-front?
<!--services section-->
<section id="services-head-section">
<div class="container">
<div class="row">
<div class="col text-center">
<div class="py-5">
<div class="wow animated fadeInLeft">
<h1 class="display-4"><strong>SERVICES</strong></h1>
<p class="lead" style="font-style:italic;">
"We can't solve problems by using the same kind of thinking we used when we created them."
-Albert Einstein
</p>
</div>
</div>
</div>
</div>
<div class="row wow animated fadeInUp">
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cog fa-spin fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Engineering</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-pie-chart fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Product Development</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Computer Applications</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-university fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Training</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
</div>
</div>
</section>
CSS:
#services-head-section {
background: url(img/1855JPerkinsSteamGun2.jpg) no-repeat;
background-size: cover;
}

I made a jsfiddle to describe what I mean here.
https://jsfiddle.net/ww5tqomd/
You are going to have two root level elements in your body tag.
The first is going to be your background image,
The second is a container that is positioned absolute over the background image.
<div class="background-image">
</div>
<div class="content-with-text">
<h1>Hello world</h1>
</div>
html,body{
height: 100%;
width: 100%;
}
.background-image {
height: 100%;
width: 100%;
margin-bottom: -100%;
background: black;
opacity: .2;
}
.content-with-text {
position: absolute;
top: 0;
left; 0;
color: blue;
}
This way you are able to adjust the opacity of the background without it affecting your content, because technically your content is not a child of the background container, but a sibling.
Hope this helps

div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(http://is4.mzstatic.com/image/thumb/Purple118/v4/a0/ee/6c/a0ee6c57-b4b2-14f3-ae42-f47ad1dd5aac/source/1200x630bb.jpg);
opacity: 0.3;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background-size:cover
}
<!DOCTYPE html>
<html>
<body>
<p>This is some text.</p>
<div style="color:#0000FF">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>
</body>
</html>

#services-head-section {
position: relative;
}
#services-head-section::after {
background: url('http://lorempixel.com/1800/780/sports/1/') 0 0 no-repeat transparent;
background-size: 100%;
bottom: 0;
content: "";
left: 0;
opacity: 0.6;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
<!--services section-->
<section id="services-head-section">
<div class="container">
<div class="row">
<div class="col text-center">
<div class="py-5">
<div class="wow animated fadeInLeft">
<h1 class="display-4"><strong>SERVICES</strong></h1>
<p class="lead" style="font-style:italic;">
"We can't solve problems by using the same kind of thinking we used when we created them."
-Albert Einstein
</p>
</div>
</div>
</div>
</div>
<div class="row wow animated fadeInUp">
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cog fa-spin fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Engineering</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-pie-chart fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Product Development</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Computer Applications</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-university fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Training</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
</div>
</div>
</section>

How to make an element active on hover, and remain active when im hovering over another specific div

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);
}
);

try this:
CSS:
.category-overlay{
width:1190px;
height:90px;
background:#ddd;
margin-top:30px;
}
.services-shortcut {
color: #555;
background: none repeat scroll 0% 0% #ddd;
}
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">
Action 1
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div data-category>
<i class="fa fa-car fa-3x"></i>
<h5>CATEGORY 2</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 2
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div data-category>
<i class="fa fa-file-text fa-3x"></i>
<h5>CATEGORY 3</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 3
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div data-category>
<i class="fa fa-home fa-3x" style="margin-bottom: -20px; margin-top: -11px; font-size: 4em;"></i>
<h5>CATEGORY 4</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 4
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div data-category>
<i class="fa fa-cogs fa-3x"></i>
<h5>CATEGORY 5</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 5
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div data-category>
<i class="fa fa-users fa-3x"></i>
<h5>CATEGORY 6</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 6
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div data-category>
<i class="fa fa-heart fa-3x"></i>
<h5>CATEGORY 7</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 7
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div data-category<h1></h1>>
<i class="fa fa-briefcase fa-3x"></i>
<h5>CATEGORY 8</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 8
</div>
</div>
</div>
</div>
</div>
</div>
JQUERY:
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');
});