Francesco Francesco - 6 months ago 12
jQuery Question

Apply javascript function only to the item hovered

I have a mega menu in which I inserted many item menu voices. Some of those menu items has submenus. I use a script to open the dropdown of submenus voices.

This is the HTML code:

<div class="dropdownblock">
<h5><a itemprop="url" href="#"><span itemprop="name">Dove Dormire</span></a></h5>
<div class="trianglesubmenu"></div>
<div class="submenublock container">
<div class="col-xs-16 col-sm-8 col-md-4 col-lg-4">
<a itemprop="url" href="#"><span itemprop="name">Hotel</span></a>
<a itemprop="url" href="#"><span itemprop="name">Agriturismo</span></a>
<a itemprop="url" href="#"><span itemprop="name">Campeggio</span></a>
</div>
<div class="col-xs-16 col-sm-8 col-md-4 col-lg-4">
<a itemprop="url" href="#"><span itemprop="name">B&amp;B</span></a>
<a itemprop="url" href="#"><span itemprop="name">Country House</span></a>
</div>
<div class="col-xs-16 col-sm-8 col-md-4 col-lg-4">
<a itemprop="url" href="#"><span itemprop="name">Appartamenti e Residence</span></a>
<a itemprop="url" href="#"><span itemprop="name">Residenze Alberghiere</span></a>
<a itemprop="url" href="#"><span itemprop="name">Case Vacanze</span></a>
</div>
<div class="col-xs-16 col-sm-8 col-md-4 col-lg-4">
<a itemprop="url" href="#"><span itemprop="name">Camere Vacanze</span></a>
<a itemprop="url" href="#"><span itemprop="name">Ostelli</span></a>
<a itemprop="url" href="#"><span itemprop="name">Villaggi turistici</span></a>
<a itemprop="url" href="#"><span itemprop="name">Area Camper</span></a>
</div>
</div>
</div>
<div class="dropdownblock">
<h5>Trasporti</h5>
<div class="trianglesubmenu"></div>
<div class="submenublock container">
<div class="col-xs-16 col-sm-8 col-md-8 col-lg-8">
<a itemprop="url" href="#"><span itemprop="name">Auto e Parcheggi</span></a>
<a itemprop="url" href="#"><span itemprop="name">Mezzi Pubblici</span></a>
<a itemprop="url" href="#"><span itemprop="name">Taxi</span></a>
</div>
<div class="col-xs-16 col-sm-8 col-md-8 col-lg-8">
<a itemprop="url" href="#"><span itemprop="name">Noleggio auto</span></a>
<a itemprop="url" href="#"><span itemprop="name">Treno</span></a>
<a itemprop="url" href="#"><span itemprop="name">Aeroporto</span></a>
</div>
</div>
</div>


This is the CSS code:

.visibletrianglesubmenu {
display: inherit;
}
.submenublock {
background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
display: none;
height: auto !important;
left: 0;
margin: 0 auto;
overflow: visible !important;
padding: 20px !important;
position: fixed;
right: 0;
z-index: 1;
}


and this is the JS code:

$(document).ready(function(){
$('.dropdownblock').mouseover(function(){
$('.submenublock').stop().slideDown(100);
$('.trianglesubmenu').addClass('visibletrianglesubmenu');
});
$('.dropdownblock').mouseout(function(){
$('.submenublock').slideUp(100);
$('.trianglesubmenu').removeClass('visibletrianglesubmenu');
});
});


Now, how can I use a generic script that apply the js function only to the element of the menu when hovered with mouse?

Actually it applies the function to every element with the same class as soon as I hover any menu item.

Thanks in advance.

Answer

the problem happens because you are selecting all the elements with the same class using $('.submenublock') but what you have to do is to find the element that is a child this element (the hovered one):

$('.dropdownblock').mouseover(function(){
    $(this).find('.submenublock').stop().slideDown(100);
    $(this).find('.trianglesubmenu').addClass('visibletrianglesubmenu');
});
$('.dropdownblock').mouseout(function(){
    $(this).find('.submenublock').slideUp(100);
    $(this).find('.trianglesubmenu').removeClass('visibletrianglesubmenu');
});