如何在mouseover中添加多个div(jquery)

时间:2014-09-01 05:03:01

标签: javascript jquery d3.js

我使用jquery有7个声明的具有不同类属性的div。我想在鼠标悬停中使用7个div。我该怎么做?

我的7个div是divOne,divTwo ......直到divSeven。

我有这个示例鼠标悬停代码,但只使用了一个div。

                    nodeEnter.append("circle")
                    .attr("r", 30)
                    .style("stroke","white")
                    .on("mouseover", function(d) {
                        divOne.transition()
                          .duration(200)
                          .style("opacity", .9);
                        divOne.html(
                           "Name" + "<br />" + "Address"
                         ) 
                          .style("left", (d3.event.pageX) + "px")
                          .style("top", (d3.event.pageY - 28) + "px");
                        })
                      .on("mouseout", function(d) {
                        divOne.transition()
                          .duration(500)
                          .style("opacity", 0);
                        });

如何在鼠标悬停期间添加其他div?任何帮助。感谢

1 个答案:

答案 0 :(得分:0)

你需要有这样的东西。

nodeEnter.append("circle")
         .attr("r", 30)
         .style("stroke", "white")
         .on("mouseover", function(d) {
             onMouseOver();
         })
         .on("mouseout", function(d) {
             onMouseOut();
         });

 var divElements = $('.classofdiv1', '.classofdiv2'......); //add all the div's class

 function onMouseOver() {
     $(divElements).each(function(index) {
         $(this).transition()
             .duration(200)
             .style("opacity", .9);
         $(this).html(
                 "Name" + "<br />" + "Address"
             )
             .style("left", (d3.event.pageX) + "px")
             .style("top", (d3.event.pageY - 28) + "px");

     });
 }

 function onMouseOut() {
     $(divElements).each(function(index) {
         $(this).transition()
             .duration(500)
             .style("opacity", 0);

     });
 }

希望这会有所帮助:)