删除 SVG mouseout 上的类

编程问答 2022-05-25

问题描述

JSFiddle

当值设置为 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);
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

hovermouseoutrectanglessvgtooltip