Is it possible to dynamically change the style of another element when hovering over a specific element? For example, I want a menu item to change its appearance when hovering over a submenu item. Here is the CSS code I have:
ul.menu .menulink {
padding:0px 13px 0px;
height:23px;
font-weight:bold;
width:auto;
}
ul.menu ul li:hover .menulink{
color:#002d36;
background-image:none;
background-color:#ffffff;
}
Here is the HTML structure:
<ul class="menu" id="menu">
<li>
<a href="#" class="menulink"><span>Main menu item</span></a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
I also attempted to achieve this using jQuery:
$('ul.menu ul li').mouseover(function(){
$('.menulink').css('color', '#002d36');
$('.menulink').css('background-color', '#ffffff');
});
$('ul.menu ul li').mouseout(function(){
$('.menulink').css('color', '');
$('.menulink').css('background-color', '');
});
However, this approach also affects other main menu items. Does anyone have a solution for this issue? Thank you in advance!