Javascript 悬停圆触发器不'；你不能在一个以上的圆上工作吗？

我找到了这个教程，并开始通过修改html等来增加它

当我加入另一个圆圈时，第一个圆圈仍然有效，但当我将鼠标悬停在第二个圆圈上时，它什么也不起作用

我计划有4个不同大小的圆圈，当你点击它们时，它们会显示里面的数据/信息

下面是一个链接，它显示了出了什么问题。我甚至可能需要小的文件变得更大，以便为数据显示提供更多空间

编辑

忘记添加代码，以下是css：

    .section{
    width: 900px;
    height: 420px;
    margin: 20px auto;
    position: relative;
}

.data{
    padding-top: 9%;

}

.data2{
    padding-top: 9%;

}


.data p{
    font-size: 40px;

}

/*So this is were I have started to draw the circle*/
/*All you have to do is set the width and height the same and then set the border radius to 50% and you have yourself circle*/

/* The circle */
.ec-circle{
    width: 420px;
    height: 420px;
    -webkit-border-radius: 210px;
    -moz-border-radius: 210px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    font-family:'Kelly Slab', Georgia, serif;
    background: #DCF8C6 ;
    -webkit-box-shadow:
        inset 0 0 1px 230px rgb(20, 189, 149), inset 0 0 0 7px #14BD95;
    -moz-box-shadow:
          inset 0 0 1px 230px rgb(20, 189, 149), inset 0 0 0 7px #14BD95;
    box-shadow:
      inset 0 0 1px 230px rgb(20, 189, 149), inset 0 0 0 7px #14BD95;
    -webkit-transition: box-shadow 400ms ease-in-out;
    -moz-transition: box-shadow 400ms ease-in-out;
    -o-transition: box-shadow 400ms ease-in-out;
    -ms-transition: box-shadow 400ms ease-in-out;
    transition: box-shadow 400ms ease-in-out;
    /*For IE < 9 so that we have some kind of effect */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    display: block;
    outline: none;
}
.ec-circle-hover{

    -webkit-box-shadow:
          inset 0 0 0 0 rgb(20, 189, 149), inset 0 0 0 5px #14BD95,
        0 0 10px rgba(0,0,0,0.3);
    -moz-box-shadow:
        inset 0 0 0 0 rgb(20, 189, 149), inset 0 0 0 5px #14BD95,
        0 0 10px rgba(0,0,0,0.3);
    box-shadow:
        inset 0 0 0 0 rgb(20, 189, 149), inset 0 0 0 5px #14BD95,
        0 0 10px rgba(0,0,0,0.3);
    /*For IE < 9 so that we have some kind of effect */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

h1{
    color: white;
    position: absolute;
}
.circle{
padding-top: 3%;

}

/* Text inside of circle */
.ec-circle h3{
    color: transparent;
    font-size: 27px;
        margin-top: 4%;
    line-height: 10px;


}




.ec-circle-hover h3{
    color: white;
    transition:all 1s ease;
-webkit-transition-delay:all 100ms ease-in-out;
-moz-transition-delay:all 100ms ease-in-out;
-ms-transition-delay:all 100ms ease-in-out;
-o-transition-delay:all 100ms ease-in-out;


}

.ec-circle-hover .h3c{
    color: black;
    border-bottom: 1px;
    border-color: red;
}


/* The circle */
.ec-circle2{
    width: 220px;
    height: 220px;
    -webkit-border-radius: 210px;
    -moz-border-radius: 210px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    font-family:'Kelly Slab', Georgia, serif;
    background: #DCF8C6 ;
    -webkit-box-shadow:
        inset 0 0 1px 230px rgb(20, 189, 149), inset 0 0 0 7px #14BD95;
    -moz-box-shadow:
          inset 0 0 1px 230px rgb(20, 189, 149), inset 0 0 0 7px #14BD95;
    box-shadow:
      inset 0 0 1px 230px rgb(20, 189, 149), inset 0 0 0 7px #14BD95;
    -webkit-transition: box-shadow 400ms ease-in-out;
    -moz-transition: box-shadow 400ms ease-in-out;
    -o-transition: box-shadow 400ms ease-in-out;
    -ms-transition: box-shadow 400ms ease-in-out;
    transition: box-shadow 400ms ease-in-out;
    /*For IE < 9 so that we have some kind of effect */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    display: block;
    outline: none;
}
.ec-circle2-hover{

    -webkit-box-shadow:
          inset 0 0 0 0 rgb(20, 189, 149), inset 0 0 0 5px #14BD95,
        0 0 10px rgba(0,0,0,0.3);
    -moz-box-shadow:
        inset 0 0 0 0 rgb(20, 189, 149), inset 0 0 0 5px #14BD95,
        0 0 10px rgba(0,0,0,0.3);
    box-shadow:
        inset 0 0 0 0 rgb(20, 189, 149), inset 0 0 0 5px #14BD95,
        0 0 10px rgba(0,0,0,0.3);
    /*For IE < 9 so that we have some kind of effect */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

h1{
    color: white;
    position: absolute;
}
.circle{
padding-top: 3%;

}

/* Text inside of circle */
.ec-circle2 h3{
    color: transparent;
    font-size: 27px;
        margin-top: 4%;
    line-height: 10px;


}




.ec-circle2-hover h3{
    color: white;
    transition:all 1s ease;
-webkit-transition-delay:all 100ms ease-in-out;
-moz-transition-delay:all 100ms ease-in-out;
-ms-transition-delay:all 100ms ease-in-out;
-o-transition-delay:all 100ms ease-in-out;


}

.ec-circle2-hover .h3c2{
    color: black;
    border-bottom: 1px;
    border-color: red;
}

部分{
宽度：900px；
高度：420px；
保证金：20px自动；
位置：相对位置；
}
.数据{
垫顶：9%；
}
.数据2{
垫顶：9%；
}
.数据p{
字体大小：40px；
}
/*这就是我开始画圆圈的原因*/
/*你所要做的就是将宽度和高度设置为相同，然后将边界半径设置为50%，你就有了一个圆*/
/*圆圈*/
欧共体圈{
宽度：420px；
高度：420px；
-webkit边界半径：210px；
-moz边界半径：210px；
边界半径：50%；
文本对齐：居中；
溢出：隐藏；
字体系列：'Kelly Slab'，乔治亚州，衬线；
背景：#DCF8C6；
-webkit盒阴影：
插图0 1px 230px rgb（20，189，149），插图0 0 7px#14BD95；
-moz盒阴影：
插图0 1px 230px rgb（20，189，149），插图0 0 7px#14BD95；
框阴影：
插图0 1px 230px rgb（20，189，149），插图0 0 7px#14BD95；
-webkit过渡：盒影400ms易入易出；
-moz过渡：盒影400ms缓进缓出；
-o型过渡：盒形阴影400ms缓进缓出；
-ms过渡：框影400ms缓进缓出；
过渡：方块阴影400ms缓进缓出；
/*对于IE<9，这样我们就有了某种效果*/
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=50）”；
显示：块；
大纲：无；
}
.ec循环悬停{
-webkit盒阴影：
插图0 0 rgb（20、189、149），插图0 0 5px#14BD95，
0.10px-rgba（0,0,0,0.3）；
-moz盒阴影：
插图0 0 rgb（20、189、149），插图0 0 5px#14BD95，
0.10px-rgba（0,0,0,0.3）；
框阴影：
插图0 0 rgb（20、189、149），插图0 0 5px#14BD95，
0.10px-rgba（0,0,0,0.3）；
/*对于IE<9，这样我们就有了某种效果*/
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=100）”；
}
h1{
颜色：白色；
位置：绝对位置；
}
.圆圈{
垫面：3%；
}
/*圆圈内的文字*/
.ec圆h3{
颜色：透明；
字体大小：27px；
利润率最高：4%；
线高：10px；
}
.ec圆圈悬停h3{
颜色：白色；
过渡：所有的1容易；
-webkit转换延迟：所有100ms的易用性输入输出；
-moz转换延迟：所有100ms的缓进缓出；
-毫秒转换延迟：所有100ms的缓进缓出；
-o-过渡-延迟：所有100ms缓进-缓出；
}
.ec圆形悬停。h3c{
颜色：黑色；
边框底部：1px；
边框颜色：红色；
}
/*圆圈*/
.ec-circle2{
宽度：220px；
高度：220px；
-webkit边界半径：210px；
-moz边界半径：210px；
边界半径：50%；
文本对齐：居中；
溢出：隐藏；
字体系列：'Kelly Slab'，乔治亚州，衬线；
背景：#DCF8C6；
-webkit盒阴影：
插图0 1px 230px rgb（20，189，149），插图0 0 7px#14BD95；
-moz盒阴影：
插图0 1px 230px rgb（20，189，149），插图0 0 7px#14BD95；
框阴影：
插图0 1px 230px rgb（20，189，149），插图0 0 7px#14BD95；
-webkit过渡：盒影400ms易入易出；
-moz过渡：盒影400ms缓进缓出；
-o型过渡：盒形阴影400ms缓进缓出；
-ms过渡：框影400ms缓进缓出；
过渡：方块阴影400ms缓进缓出；
/*对于IE<9，这样我们就有了某种效果*/
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=50）”；
显示：块；
大纲：无；
}
.ec-圆圈2-悬停{
-webkit盒阴影：
插图0 0 rgb（20、189、149），插图0 0 5px#14BD95，
0.10px-rgba（0,0,0,0.3）；
-moz盒阴影：
插图0 0 rgb（20、189、149），插图0 0 5px#14BD95，
0.10px-rgba（0,0,0,0.3）；
框阴影：
插图0 0 rgb（20、189、149），插图0 0 5px#14BD95，
0.10px-rgba（0,0,0,0.3）；
/*对于IE<9，这样我们就有了某种效果*/
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=100）”；
}
h1{
颜色：白色；
位置：绝对位置；
}
.圆圈{
垫面：3%；
}
/*圆圈内的文字*/
.ec-circle2 h3{
颜色：透明；
字体大小：27px；
利润率最高：4%；
线高：10px；
}
.ec-圆圈2-悬停h3{
颜色：白色；
过渡：所有的1容易；
-webkit转换延迟：所有100ms的易用性输入输出；
-moz转换延迟：所有100ms的缓进缓出；
-毫秒转换延迟：所有100ms的缓进缓出；
-o-过渡-延迟：所有100ms缓进-缓出；
}
.ec-circle2-hover.h3c2{
颜色：黑色；
边框底部：1px；
边框颜色：红色；
}

以及html/JavaScript：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hover and Click Trigger for Circular Elements with jQuery</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Kelly+Slab' rel='stylesheet' type='text/css' />
        <script type="text/javascript" src="js/modernizr.custom.72835.js"></script>
    </head>
    <body>
        <div class="container">

            <div class="wrapper">
                <div class="section">
                    <div class="normal-trigger-area">
                        <div id="circle" class="ec-circle">
                            <div class="data"><p>Kati</p>
                <h3 class="h3c">Size</h3>
                  <h3>- 2023 -</h3>
                <h3 class="h3c">Habitat</h3>
                  <h3>- Mostly forest -</h3>
                  <h3 class="h3c">Number of Takahe Pairs</h3>
                <h3> - 10 -</h3></div>
                        </div>
                    </div>

            </div>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.circlemouse.js"></script>

        <script type="text/javascript">
            $(function() {

        $('#circle').circlemouse({
          onMouseEnter  : function( el ) {

            el.addClass('ec-circle-hover');

          },
          onMouseLeave  : function( el ) {

            el.removeClass('ec-circle-hover');

          },

        });

      });
        </script>

        <div class="container">

            <div class="wrapper">
        <div class="section">
          <div class="normal-trigger-area">
            <div id="circle2" class="ec-circle2">
              <div class="data2"><p>Kati</p>
                <h3 class="h3c2">Size</h3>
                  <h3>- 2023 -</h3>
                <h3 class="h3c2">Habitat</h3>
                  <h3>- Mostly forest -</h3>
                  <h3 class="h3c2">Number of Takahe Pairs</h3>
                <h3> - 10 -</h3></div>
            </div>
          </div>

            </div>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.circlemouse.js"></script>


        <script type="text/javascript">
            $(function() {

        $('#circle2').circlemouse({
          onMouseEnter  : function( el ) {

            el.addClass('ec-circle-hover2');

          },
          onMouseLeave  : function( el ) {

            el.removeClass('ec-circle-hover2');

          },

        });

      });
        </script>
    </body>
</html>

使用jQuery悬停并单击圆形元素的触发器
卡蒂

大小
- 2023 -
栖息地
-大部分是森林-
Takahe对数
- 10 -
$（函数（）{
$（“#圆”）。圆房子({
onMouseCenter：函数（el）{
el.addClass（“ec-circle-hover”）；
},
onMouseLeave：函数（el）{
el.removeClass（“ec-circle-hover”）；
},
});
});
el.addClass('ec-circle2-hover');