Javascript 多个Google+；圆圈同时不正确地悬停

我有代码创建一个单一的谷歌+圆圈。但是当我在JSTL（JSP）（ArrayList）中使用for循环创建多个圆时，所有的圆都会同时悬停。当我把鼠标放在每个圆圈上时，我需要圆圈效果。我正在使用jQuery获得效果。代码如下：

JSP
ArrayList

  <c:forEach items="${groups}" var="groups">
          <div id="circle">
        <div class="outer"> </div>
        <div class="middle"></div>`enter code here`
        <div class="inner"><c:out value="${groups.name}"/></div>
    </div>

 </c:forEach>

---

请帮助我创建多个圆。

首先，您使用唯一id属性来标识多个圆。这是不正确的。使用id属性时，每个id必须是唯一的。在对类似元素进行分组时，请改用类

话虽如此，经过仔细审查，这实际上并没有造成您的具体问题；然而，如果不加以纠正，它可能会在将来表现为一个不同的问题

实际上，问题是由addClass和removeClass选择器引起的。

当您添加和删除悬停类时，您正在使用类outer和类inner对所有DIV执行此操作。使用jQuery find方法仅针对圈上下文中的特定DIV：

$(function() {

    $('.circle').mouseover(function() {

        $(this).find('div.outer').addClass('hover');
        $(this).find('div.middle').addClass('hover');
    });


    $('.circle').mouseout(function() {
        $(this).find('div.outer').removeClass('hover');
        $(this).find('div.middle').removeClass('hover');
    });

});

我还将选择器更改为使用类

<c:forEach items="${groups}" var="groups">
      <div class="circle">

---

首先，使用唯一id属性标识多个圆。这是不正确的。使用id属性时，每个id必须是唯一的。在对类似元素进行分组时，请改用类

话虽如此，经过仔细审查，这实际上并没有造成您的具体问题；然而，如果不加以纠正，它可能会在将来表现为一个不同的问题

实际上，问题是由addClass和removeClass选择器引起的。

当您添加和删除悬停类时，您正在使用类outer和类inner对所有DIV执行此操作。使用jQuery find方法仅针对圈上下文中的特定DIV：

$(function() {

    $('.circle').mouseover(function() {

        $(this).find('div.outer').addClass('hover');
        $(this).find('div.middle').addClass('hover');
    });


    $('.circle').mouseout(function() {
        $(this).find('div.outer').removeClass('hover');
        $(this).find('div.middle').removeClass('hover');
    });

});

我还将选择器更改为使用类

<c:forEach items="${groups}" var="groups">
      <div class="circle">