I want to put hover into the element inside the sidebar that I already have.
I try to use hover ,but it seems not working. I appreciate every answer.
.sidebar .navbar .nav-link:hover{
color: #EFDBFF;
display: block;
background: white;
border-color: #EFDBFF;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header class="header row ">
<div class="d-flex justify-content-between">
<div id="logo" class="pb-2 ps-2 pe-0 col-2">
<img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
<a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
<i class="fa-solid fa-angle-left py-4 pe-2"></i>
</a>
</div>
</div>
</header>
<div class="body row ">
<div class="sidebar col-2 " id="sidebar">
<!--sidebar start-->
<div class="navbar-nav w-100">
<div class="nav-item dropdown">
<i class="fa fa-laptop me-2"></i>Admin
<div class="dropdown-menu bg-transparent border-0">
A
B
C
</div>
</div>
<i class="fa fa-th me-2"></i>Cập nhật PO
<i class="fa fa-keyboard me-2"></i>Phân loại PO
<i class="fa fa-chart-bar me-2"></i>Ước tính rebate
<i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate
<i class="fa fa-tachometer-alt me-2"></i>Báo cáo
<i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin
<i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng
</div>
<!--sidebar end-->
</div>
<div class="content col-10"> Content
</div>
</div>
<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script>
your css selector is wrong
this will solve your problem
.sidebar .navbar-nav .nav-link:hover{
color: #EFDBFF;
display: block;
background: white;
border-color: #EFDBFF;
}
Is your css code connected to html?
Maybe nav-item class overrides. Use nav-link class with !important
More information: https://www.w3schools.com/css/css_important.asp
I see your selector is incorrect.
On your html you have navbar-nav so you'll have to use .navbar-nav on your selector.
your html
...
<!--sidebar start-->
<div class="navbar-nav w-100">
...
so the updated selector is
.sidebar .navbar-nav .nav-link:hover
.sidebar .navbar-nav .nav-link:hover{
color: #EFDBFF;
display: block;
background: white;
border-color: #EFDBFF;
}
That will solve the problem.
Related
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>
I have a simple navigation for resolution less than 757px I used bootstrap and pure JavaScript
if i resize my desktop browser it works but in mobile browser it doesn't work, even on fiddle it works but in real mobile browser it doesn't work(i have uploaded project to server)
now it doesnt work on desktop either i cant remove d-none class for links
html code
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<header>
<div class="clearfix mx-3 my-2 d-md-none">
<label class="float-left">
<i class="fas fa-bars fa-2x p-1" role="button" id="sign-one" onclick="show()"></i>
<i class="fas fa-times fa-2x d-none p-1" role="button" id="sign-two" onclick="hide()"></i>
</label>
</div>
<div id="my-menu">
<ul class="list-unstyled d-none" id="links">
<p>واحدها<p>
<p> محصولات</p>
<p> <a href="/pages/درباره-ما"
class="text-white">درباره ما</a></p>
<p> اخبار</p>
<p> ارتباط با ما</p>
</ul>
</div>
</header>
</body>
</html>
css
#my-menu{
position: relative;
}
#links{
position: absolute;
padding: 30px 25px;
border-radius: 7px;
background-color: #3CB371;
text-align: center;
color: white;
transition:all .5s ease;
z-index: 10;
}
javascript
function show() {
document.getElementById("links").classList.toggle('d-none');
document.getElementById('sign-one').classList.toggle('d-none');
document.getElementById('sign-two').classList.toggle('d-none');
}
function hide() {
document.getElementById("links").classList.toggle('d-none');
document.getElementById('sign-one').classList.toggle('d-none');
document.getElementById('sign-two').classList.toggle('d-none');
}
here is the jsfiddle link
thank you in advance
I've changed your code little bit. jsfiddle working demo
HTML
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
</head>
<body>
<header>
<div class="clearfix mx-3 my-2">
<label class="float-left d-none">
<i class="fas fa-bars fa-2x p-1" role="button" id="sign-one" onclick="toggle()"></i>
<i class="fas fa-times fa-2x d-none p-1" role="button" id="sign-two" onclick="toggle()"></i>
</label>
</div>
<div id="my-menu">
<ul class="list-unstyled" id="links">
<li>
واحدها
<p></p>
<p>محصولات</p>
<p>درباره ما</p>
<p>اخبار</p>
<p>ارتباط با ما</p>
</li>
</ul>
</div>
</header>
</body>
</html>
js
const navIcon = document.querySelector('.float-left')
const menu = document.querySelector('#my-menu')
const signOne = document.getElementById('sign-one');
const signTwo = document.getElementById('sign-two');
function toggle() {
signOne.classList.toggle('d-none');
signTwo.classList.toggle('d-none');
menu.classList.toggle('d-none')
}
function responsive(e) {
if (window.innerWidth < 757) {
navIcon.classList.remove('d-none')
menu.classList.add('d-none')
// If sign-two not hidden then menu shown on less then 757px screen
if (!signTwo.classList.contains('d-none')) {
menu.classList.remove('d-none')
}
} else {
navIcon.classList.add('d-none')
menu.classList.remove('d-none')
}
}
window.addEventListener('resize', responsive);
window.addEventListener('load', responsive);
Remove d-md-none from <div class="clearfix mx-3 my-2 d-md-none">
I have a bootstrap modal that contains a bunch of strings. I also have a loop of cards that each has a different 'id'. When I open the modal I want id to be displayed inside the modal (I will use it to get more info later, like name, description and deadline).
This is my loop of JSON objects:
<div class="card-list-body">
{% for assignment in förseningar %}
<div class="card card-kanban" data-toggle="modal" data-target="#task-modal" id="{{assignment.id}}">
<script>
$('#task-modal').on('show.bs.modal', function(event) {
var Id = $(event.relatedTarget).data('id');
console.log("aaa")
$(event.currentTarget).find('input[name="modal-title"]').val(Id);
});
</script>
<div class="card-body">
<div class="dropdown card-options">
<button class="btn-options" type="button" id="kanban-dropdown-button-16" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item text-danger" href="#">Archive Card</a>
</div>
</div>
<div class="card-title" style="white-space: initial; ">
<a href="#" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 400">
{{assignment.type_of_assignment}} i {{assignment.course}} </h6>
</a>
</div>
<div class="card-title" style="white-space: initial; ">
<a href="" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 600">
{{assignment.name}}
</h6>
</a>
</div>
<div class="card-title" style="white-space: initial; ">
<a href="#" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 600; color: #d21b1b">
Försenad
</h6>
</a>
</div>
<style>
.hor-list {
list-style-type: none;
overflow: hidden;
display: block;
text-decoration: none;
padding: 0px;
margin-right: 5px;
}
.circle {
border-radius: 50%;
height: 30px;
text-align: center;
width: 30px;
}
.list-item {
float: left;
margin-right: 1px
}
.initials {
font-size: 15px;
font-weight: 800;
line-height: 1;
position: relative;
top: 3px;
/* 25% of parent */
}
</style>
<ul class="hor-list2">
{% for teacher in assignment.teachers.all %}
<li class = "list-item2">
<span class="step" style="background: {{teacher.userColor}};">{{teacher.user.username|first|capfirst}}</span>
</li>
{% endfor %}
<li class = "list-item2">
<p style="margin-left: 10px; font-size: 15px">
{{assignment.teachers.count}} Lärare:
{% for teacher in assignment.teachers.all %}
{{teacher.user.username|capfirst}}
{% endfor %}
</p>
</li>
</ul>
<hr>
<div class="card-title" style="white-space: initial; ">
<a href="#" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 600; color: rgb(82, 130, 202)">
Börja Plugga. Skapa en studieplan
</h6>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
This is a piece of the modal:
<div class="modal modal-task" id="task-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title">Create Brand Mood Boards</h5>
<button type="button" class="close btn btn-round" data-dismiss="modal" aria-label="Close">
<i class="material-icons">close</i>
</button>
</div>
<!--end of modal head-->
<div class="modal-body">
<div class="page-header">
<p class="lead">Assemble three distinct mood boards for client consideration</p>
<div class="d-flex align-items-center">
<button class="btn btn-round" data-toggle="modal" data-target="#user-manage-modal">
<i class="material-icons">add</i>
</button>
</div>
<div>
<div class="progress">
<div class="progress-bar bg-success" style="width:42%;"></div>
</div>
<div class="d-flex justify-content-between text-small">
<div class="d-flex align-items-center">
<i class="material-icons">playlist_add_check</i>
<span>3/7</span>
</div>
<span>Due 14 days</span>
</div>
</div>
</div>
<ul class="nav nav-tabs nav-fill" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#task" role="tab" aria-controls="task" aria-selected="true">Task</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#files" role="tab" aria-controls="files" aria-selected="false">Files</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="task" role="tabpanel">
<div class="content-list" data-filter-list="checklist">
the javascript:
<script>
$('#task-modal').on('show.bs.modal', function(event) {
var Id = $(event.relatedTarget).data('id');
console.log("aaa")
$(event.currentTarget).find('input[name="modal-title"]').val(Id);
});
</script>
As I said. I want a detail page of a card. So when I press the card I get a popup. I want that popup to contain a more detailed page of the card. I can't figure out how to get the data into the popup modal tho (task-modal) I think this is close but if anyone could help it would be greatly appreciated!
Three issues:
Your javascript is inside the for loop ({% for assignment in förseningar %}), it should be outside. Otherwise it's repeated x times.
var Id = $(event.relatedTarget).data('id') means that the button triggering the modal has a data-id attribute. But yours doesn't, it has an id attribute. So either set data-id="{{ assignment.id }}" in the <div class="card card-kanban" ...> or change to var Id = $(event.relatedTarget).attr('id').
$(event.currentTarget).find('input[name="modal-title"]') means you're looking for an <input name="modal-title"> element in your modal, but I don't see that anywhere. Maybe it got cut-off in which case no issue. But if you're trying to change the modal-title div of your modal, then the selector should be: $(this).find('.modal-title').
Note: I use $(this) instead of $(event.currentTarget). Shouldn't make any difference as the currentTarget is the modal and so is this.
We created a custom accordion library that will toggle the .content element based on what is clicked similar to jQuery accordion. Next to the .header element we are displaying a fontawesome plus icon. I am running into issues where the content will hide and show, but the icon will not switch.
How can i get the content element and icons to switch?
Current issue:
Desired output:
$(function() {
$('.header').on('click', function() {
var hdr = $(this);
var grandParents = hdr.parent().parent();
grandParents.find('.item.active').removeClass('active');
grandParents.find('.content').stop().slideUp().removeClass('active');
hdr.closest('.item').find('.content').stop().slideToggle();
hdr.parent().toggleClass('active');
});
});
.content {
display: none;
}
.item.active > .content {
display: block;
}
.item.active > .header {
color: white;
background-color: black;
}
.header {
padding: 16px;
margin: 8px;
background-color: lightgrey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
<div class="accordion">
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>First link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>second link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>third link</span>
</h3>
<div class='content'> Some more content </div>
</div>
</div>
I have updated your js code, please check. The general concept of my update is, in every click, the icon is removed and replaced with a new but different one (from plus to minus and vice versa).
The problem on this is that the use of fontawesome icons. But anyways, take a look on my code.
Here's the full working code. The only update I have is the js part.
$(function() {
$('.header').on('click', function() {
var hdr = $(this);
hdr.siblings('.content').slideToggle();
hdr.parent().toggleClass('active');
hdr.parent().siblings().find('.content').slideUp();
hdr.parent().siblings().removeClass('active');
if(hdr.parent().hasClass('active')) {
hdr.parent().find('svg').remove();
hdr.parent().siblings().find('svg').remove();
hdr.prepend('<i class="fas fa-minus"></i>');
hdr.parent().siblings().find('.header').prepend('<i class="fas fa-plus"></i>');
} else {
hdr.parent().find('svg').remove();
hdr.prepend('<i class="fas fa-plus"></i>');
}
});
});
.content {
display: none;
}
.item.active > .content {
display: block;
}
.item.active > .header {
color: white;
background-color: black;
}
.header {
padding: 16px;
margin: 8px;
background-color: lightgrey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
<div class="accordion">
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>First link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>second link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>third link</span>
</h3>
<div class='content'> Some more content </div>
</div>
</div>
We had same kind of requirement, where we had to replace the + icon of each accordion item with dynamic icon specific to the accordion content, like
1st Accordion - a.png
2nd accordion - b.png and so on.
I did it by adding an image to the Accordion Item page content template and assign it to the cloned accordion rendering.
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');
});