删除 SVG mouseout 上的类

如何解决删除 SVG mouseout 上的类

当值设置为 none 时，努力从 SVG 矩形中移除工具提示框（将鼠标悬停在底部蓝色矩形上以查看此内容）。我试过 getElementsByClassName() 并且它仍然显示灰色工具提示框。如果根据类而不是 ID 删除它，我将不胜感激，因为我有大约 130 个矩形需要分配唯一 ID + 为 JS 添加大约 130 行。

将 .hover 更改为 mouseenter 或 mouSEOver = 无效将 mouseleave 更改为 mouSEOut = 无效。

带有 SVG 的 HTML

<div id="info-Box"></div>
 
<svg width="959px" height="593px">

<rect x="50" y="30" width="100" height="50" data-info="<div><b>Bla:</b> Bla</div><div><b>bla:</b> NMore blabla</div>"></rect>

<rect x="60" y="130" width="100" height="50" data-info="<div><img src='https://upload.wikimedia.org/wikipedia/commons/4/42/Cute-Ball-Go-icon.png' width='30px'></div><div><b>Stasdf</b> wsdfsdfer</div><div><b>Csdfsdfage:</b> Nosdfsdf</div>"></rect>

<rect x="70" y="230" width="100" height="50" data-info></rect>

</svg>

CSS

rect{
  fill:blue;
}


#info-Box {
  display:none;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  padding: 15px;
  color: #ffffff;
  background-color:#212121;
  opacity: 0.85;
  font-family: arial;
}

JS（使用 jquery）

  $("rect").hover(function(e) {
  $("#info-Box").css("display","block");
  $("#info-Box").html($(this).data("info"));
});

$("rect").mouseleave(function(e) {
  $("#info-Box").css("display","none");
});

$(document)
  .mousemove(function(e) {
    $("#info-Box").css("top",e.pageY - $("#info-Box").height() - 35);
    $("#info-Box").css("left",e.pageX - $("#info-Box").width() / 2);
});

解决方法

如果我理解正确的话..你只需要指定选择器：不是$("rect")，而是$("rect[data-info != '']")。 jsfiddle.net/L25swzv7

左右：https://jsfiddle.net/L25swzv7/1/