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"
});

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

2 个答案: