删除 SVG mouseout 上的类答案

【问题标题】：Remove class on SVG mouseout删除 SVG mouseout 上的类
【发布时间】：2021-05-16 20:49:01
【问题描述】：

当值设置为无时，在悬停时努力从 SVG rect 中删除工具提示框（悬停在底部的蓝色矩形上以查看此内容）。我试过 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);
});

【问题讨论】：

标签： svg hover tooltip rectangles mouseout

【解决方案1】：

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

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

【讨论】：

Спасибо。 Помогло。（谢谢。这有帮助）。