I am working on a hover effect for a button that should add a CSS class to a specific element. Despite having multiple elements, I only want the class added to one particular element.
Here is my current code:
$("ul.subnav").parent().append("<span></span>"); //This line adds an empty span tag after ul.subnav to show drop down trigger when JS is enabled
var button = $('#loginButton');
button.hover(function (login) {
$("ul.navbar-nav li span").addClass("subhover");
}, function () {
$("ul.navbar-nav li span").removeClass("subhover");
});
Although this code works, it applies the class to all elements.
<li>
<a id="loginButton">
<img class="IconStyle" src="Icons/loginIcon.ico"></img>
</a>
<ul class="subnav">
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
</ul>
<span class=""></span> // This specific element is where I need to add the class.
I want to add the class specifically to the , even though multiple instances are created programmatically.