Fatal编程技术网
  • html/
  • Html 当鼠标悬停在1个元素上时，我有多个svg元素所有元素必须同时显示文本悬停

Html 当鼠标悬停在1个元素上时，我有多个svg元素所有元素必须同时显示文本悬停

html

Html 当鼠标悬停在1个元素上时，我有多个svg元素所有元素必须同时显示文本悬停,html,hover,tooltip,mousehover,Html,Hover,Tooltip,Mousehover,当鼠标悬停在1个元素上时，我有多个SVG元素所有元素必须同时显示文本悬停 我怎么能做到 这是我的密码 <html> <head> <title>conservedClusters_FRAAL_16</title> </head> <body> <svg width="1500" height="500" xmlns="http://www.w3.org/2000/svg" version="1

当鼠标悬停在1个元素上时，我有多个SVG元素所有元素必须同时显示文本悬停

我怎么能做到

这是我的密码

<html>
    <head>
    <title>conservedClusters_FRAAL_16</title>
    </head>
<body>

<svg width="1500" height="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <style>
    .tooltip{
font-size: 16px;
font-family: Times New Roman;
}
.tooltip_bg{
    fill: white;
stroke: black;
stroke-width: 1;
opacity: 0.9;
}
</style>
    <script type="text/ecmascript">
    <![CDATA[
        function init(evt)
    {
        if ( window.svgDocument == null )
        {
        svgDocument = evt.target.ownerDocument;
        }

        tooltip = svgDocument.getElementById('tooltip');
        tooltip_bg = svgDocument.getElementById('tooltip_bg');
        }
        function ShowTooltip(evt, mouseovertext, xpos, ypos)
    {
        tooltip.firstChild.data = mouseovertext;
        length = tooltip.getComputedTextLength();
        if (length + xpos > 1500)
        {
            xpos=1500-length-10;
        }
        tooltip.setAttributeNS(null,"x",xpos+3);
        tooltip.setAttributeNS(null,"y",ypos+13);
            tooltip.setAttributeNS(null,"visibility","visible");
            length = tooltip.getComputedTextLength();
        tooltip_bg.setAttributeNS(null,"width",length+8);
        tooltip_bg.setAttributeNS(null,"x",xpos);
        tooltip_bg.setAttributeNS(null,"y",ypos);
        tooltip_bg.setAttributeNS(null,"visibility","visibile");
    }

    function HideTooltip(evt)
    {
        tooltip.setAttributeNS(null,"visibility","hidden");
        tooltip_bg.setAttributeNS(null,"visibility","hidden");
    }

    function writeConsole(content,linkaddress,linktext,winTitle) {
         top.consoleRef=window.open('','myconsole',
          '',//'width=350,height=250'
           +',menubar=0'
           +',toolbar=1'
           +',status=0'
           +',scrollbars=1'
           +',resizable=1')
         top.consoleRef.document.writeln(
          '<html><head><title>'+winTitle+'</title></head>'
           +'<body bgcolor=white onLoad="self.focus()">'
           +'<a href="'+linkaddress+'" target="_blank">'+linktext+'</a>'+
           '<p><font face="courier">'+content+'</font></p>'
           +'</body></html>'
         )
         top.consoleRef.document.close()
    }

    function onGeneMouseOver(evt,strokecolor,colorval)
    {
      var gene = evt.target;
      var parent = gene.parentNode;
      var others = parent.getElementsByTagName('path');
      for (var i=0,len=others.length;i<len;++i)
      {
        others[i].style.stroke=strokecolor;
        others[i].style.fill=colorval;
        //others[i].setAttribute("style", "stroke-linecap: square; stroke-linejoin: miter; fill:"+colorval+"; stroke:"+strokecolor+"; stroke-width:1");
      }
    }

    ]]>
</script>
        <g class="all1303" onmouseover="onGeneMouseOver(evt,'red','pink')" onmouseout="onGeneMouseOver(evt,'black','#cf0f78')">

  <path id="all" d=" M487 73L423 73L423 63L403 83L423 103L423 93L487 93 L487 73 " style="stroke-linecap: square; stroke-linejoin: miter; fill:#cf0f78; fill-opacity:1.00; stroke:black; stroke-width:1" onmousemove="ShowTooltip(evt, 'FraEuI1c_4753, 1.00, Beta-ketoacyl synthase', 492, 93)" onmouseout="HideTooltip(evt)" />

  <path id="all" d=" M257 156L324 156L324 146L344 166L324 186L324 176L257 176 L257 156 " style="stroke-linecap: square; stroke-linejoin: miter; fill:#cf0f78; fill-opacity:1.00; stroke:black; stroke-width:1" onmousemove="ShowTooltip(evt, 'Franean1_2393, 1.00, Beta-ketoacyl synthase', 349, 176)" onmouseout="HideTooltip(evt)" />         
    </g>

    <rect class="tooltip_bg" id="tooltip_bg"
 x="0" y="0" rx="4" ry="4"
 width="55" height="17" visibility="hidden"/>
<text class="tooltip" id="tooltip"
 x="0" y="0" visibility="hidden">Tooltip</text>
    </svg>
</body>
</html>


守恒簇
.工具提示{
字体大小：16px；
字体系列：时代新罗马；
}
.工具提示\u bg{
填充物：白色；
笔画：黑色；
笔画宽度：1；
不透明度：0.9；
}
1500)
{
xpos=1500-length-10；
}
工具提示.setAttributeNS（null，“x”，xpos+3）；
工具提示.setAttributeNS（空，“y”，ypos+13）；
setAttributeNS（null，“可见性”、“可见”）；
长度=工具提示。getComputedTextLength（）；
工具提示\u bg.setAttributeNS（空，“宽度”，长度+8）；
工具提示\u bg.setAttributeNS（null，“x”，xpos）；
工具提示\u bg.setAttributeNS（null，“y”，ypos）；
工具提示设置属性（空，“可见性”、“可见性”）；
}
功能HideTooltip（evt）
{
setAttributeNS（null，“可见性”、“隐藏”）；
工具提示设置属性（空，“可见性”、“隐藏”）；
}
函数writeConsole（内容、链接地址、链接文本、winTitle）{
top.consoleRef=window.open（“”，'myconsole'，
''，/'宽度=350，高度=250'
+“，菜单栏=0”
+'工具栏=1'
+“，状态=0”
+“，滚动条=1”
+'，可调整大小=1'）
top.consoleRef.document.writeln(
''+winTitle+''文件
+''
+''+
“”+内容+”
”
+''
)
top.consoleRef.document.close（）
}
功能OnGeneover（evt、strokecolor、colorval）
{
var基因=evt.target；
var parent=gene.parentNode；
var others=parent.getElementsByTagName（'path'）；
对于（var i=0，len=others.length；i
工具提示