Question

我将鼠标悬停在导航中的某个项目后，尝试将其添加到特定的div中。我正在使用CDN的jQuery 3.1.1。我得到了not a function error。这是代码：

$(document).ready(function(){
    var navigation = $("nav ul#primary-menu li");
    var brands = $("div.brands > div");

    navigation[0].mouseover(function() {
        brands[0].addClass("hovered");
    });

    navigation[1].mouseover(function() {
        brands[1].addClass("hovered");
    });

    navigation[2].mouseover(function() {
        brands[2].addClass("hovered");
    });

    navigation[5].mouseover(function() {
        brands[3].addClass("hovered");
    });    
});

有什么想法吗？

Answer 1

navigation[0]不是jQuery对象，它是纯粹的html元素

要访问jQuery方法，您必须使用navigation.eq(0)代替（与brands相同）

Answer 2

假设navigation[5]是navigation[3]的拼写错误，则没有理由重复所有mouseover绑定。在单个处理程序中使用.index()和.eq()来引用其他集合的相应元素。

navigation.mouseover(function() {
    brands.eq($(this).index()).addClass("hovered");
});

如果您抓取的li与获得该类的div之间的关系不是这么简单，您可以将一个属性放入li中，告诉它哪个DIV要突出。

<li data-rel="divid">

然后处理程序看起来像：

navigation.mouseover(function() {
    var div = $(this).data("rel");
    if (div) {
        $("#" + div).addClass("hovered");
});

这比将索引硬编码到Javascript中更好（恕我直言）。

Answer 3

元素选择器也可用于选择多个元素，如下例所示，当鼠标指针悬停在所选元素上时，会发生鼠标悬停事件。在这种情况下，任何段落元素

＆＃13;

$("p").mouseover(function(){
  $("h2, div, span").css("background-color", "yellow");
});
$("p").mouseout(function(){
  $("h2, div, span").css("background-color", "lightgray");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Welcome to My Web Page</h1>
<h2>Nice to meet you</h2>

<div>Very nice indeed.</div>

<p>How are you?</p>
<p>I'm fine, <span>thanks.</span></p>

＆＃13;

mouseover不是一个功能

3 个答案: