Question

我希望有人可以查看我的代码并告诉我哪里错了..

HTML5：

<div class="btn-group" id="dropdown-wrapper">
    <a href="#" data-toggle="dropdown" id="toggle-dropdown">Het 10-stappenplan <i class="fa fa-caret-down"></i></span></a>
    <ul class="dropdown-menu">
        <li><a href="#">Stap 1</a></li>
        <li><a href="#">Stap 2</a></li>
        <li><a href="#">Stap 3</a></li>
        <li><a href="#">Stap 4</a></li>
        <li><a href="#">Stap 5</a></li>
        <li><a href="#">Stap 6</a></li>
        <li><a href="#">Stap 7</a></li>
        <li><a href="#">Stap 8</a></li>
        <li><a href="#">Stap 9</a></li>
        <li><a href="#">Stap 10</a></li>
    </ul>
</div>

Jquery：

$(document).ready(function () {
    $("a#toggle-dropdown").hover(function () {
        $("a#toggle-dropdown").addClass("test");
    })
});

我希望有人能说出我做错了什么，我无法找出我做错了什么..

Jquery会有点不同，因为我希望只要用户将鼠标悬停在#tutground-dropdown上，就可以将该类打开到.btn-group。

Answer 1

使用JS进行悬停效果并不总是一个好主意，如果可以的话，请使用CSS：

#toggle-dropdown
{
  // non-hovered style effects
}

#toggle-dropdown:hover
{
  // alternate effects
}

这种情况要快得多，尤其是当您有许多标签时。

突出显示所有链接：

.dropdown-menu a
{
  background-color: #cccccc; // light grey
}

.dropdown-menu a:hover
{
  background-color: #ff0000; // red
}

不使用CSS但JS的原因非常有限：

您不使用锚点（<a>）标记
你想要与IE8及更早版本的兼容性

如果您使用<a>锚标记，则没有理由不使用CSS。

在所有其他情况下，CSS方式是首选。

如果可以（因为您已经使用过jQuery）执行标准和整合的最后一步并使用Bootstrap，它在您的情况下非常有用，但需要一些前期学习。相信我，你将从那里写下的所有HTML网页中付清。

Answer 2

你需要什么，

$("a#toggle-dropdown").hover(function () {
    $(this).addClass("test"); // use this instead
});

$("a#toggle-dropdown").hover(function () {
   $(this).addClass("test"); // use this instead
});

.test{
   color:#0CF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" id="dropdown-wrapper">
    <a href="#" data-toggle="dropdown" id="toggle-dropdown">Het 10-stappenplan <i class="fa fa-caret-down"></i></span></a>
    <ul class="dropdown-menu">
        <li><a href="#">Stap 1</a></li>
        <li><a href="#">Stap 2</a></li>
        <li><a href="#">Stap 3</a></li>
        <li><a href="#">Stap 4</a></li>
        <li><a href="#">Stap 5</a></li>
        <li><a href="#">Stap 6</a></li>
        <li><a href="#">Stap 7</a></li>
        <li><a href="#">Stap 8</a></li>
        <li><a href="#">Stap 9</a></li>
        <li><a href="#">Stap 10</a></li>
    </ul>
</div>

但最好使用CSS效果，如@pid建议的那样，

a#toggle-dropdown
{
     color:#CCC;
}

a#toggle-dropdown:hover
{
     color:#FFF;
}

此外，我认为您需要将open类添加到ul drop-down类似

$("a#toggle-dropdown").hover(function () {
    $(this).next('.dropdown-menu').addClass("open"); // add open class to show
},function(){
    $(this).next('.dropdown-menu').removeClass("open"); // remove open to hide it
});

Answer 3

ID应该是唯一的，因此您只能使用$（“＃toggle-dropdown”）而不是$（“#toggle-dropdown”）;

我们试试这个：

$(document).ready(function () {
    $( "#toggle-dropdown" ).on("hover", function() {
        $(this).addClass("test");
    });
});

Jquery悬停不起作用，不添加类

3 个答案: