我有一个 SVG 格式的图形,我想实现一个功能,当鼠标指针悬停在它上面时,它会更改任何节点的标题属性,并在指针移开时返回旧标题。为了实现这一点,我正在尝试使用 jQuery 库,我的代码如下所示:
var oldTitle;
$(document).ready(function() {
$("g[class=node]").hover(funciton() {
oldTitle = $(this).prop("title");
$(this).prop("title", "New Title!");
}, function() {
$(this).prop("title", oldTitle);
}
);
});
但是,由于某种原因,代码无法正常运行,我看不到预期的效果。关于这里出了什么问题的任何想法?
编辑:我想我知道问题是什么,但仍在寻找解决方案。因此,在矢量图形 html 代码中,节点表示为:
<g id="node2" class="node"><title>SomeTitle</title>
<ellipse fill="forestgreen" stroke="forestgreen" cx="243.017" cy="-678" rx="27" ry="18"/>
<text text-anchor="middle" x="243.017" y="-674.3" font-family="Times New Roman,serif" font-size="14.00">b</text>
</g>
现在,我希望悬停动作更改文本之间的文本,<title> ... </title>
并在鼠标指针移开时将其更改回来。
关于如何实现这一点的任何帮助?
PS:$(this).prop("title") 返回 undefined,所以这里的 title 不是节点元素的属性......那么,它是什么?以及如何改变?
非常感谢!