将类添加到未选择/聚焦的元素

Question

我有一个按钮，当它悬停时，我想将一个 CSS 类添加到另一个元素。但是我有多个元素，只想将其添加到特定的元素中。

目前我有：

  $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

var button = $('#loginButton');
 button.hover(function (login) {
    $("ul.navbar-nav li span").addClass("subhover");
}, function () {    //On Hover Out
    $("ul.navbar-nav li span").removeClass("subhover"); //On hover out, remove class "subhover"
});

这有效，但是它将类添加到所有元素中。

<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 is the element i want to add a class to.

这就是我想添加类的内容，但是正如我所说，其中有 5 个以编程方式创建

Answer 1

您可以使用

toggleClass和in/out悬停处理程序：

button.hover(function (login) {
    $(this).closest('li').find('span').toggleClass("subhover");
});

Answer 2

将 HTML 更改为：

<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 id = 'spanElement'></span>

和您的 JQuery 以：

var button = $('#loginButton');
alert($("ul.navbar-nav li span").eq(1000000));
 button.hover(function (login) {
    $("#spanElement").addClass("subhover");
}, function () {    //On Hover Out
    $("#spanElement").removeClass("subhover"); //On hover out, remove class "subhover"
});