谁能解释为什么svg矩形在悬停时闪烁？我认为它应该保持稳定。我想在悬停时使用信息框，但我不想使用Jquery。有问题的矩形是右边的橙色（图形设计师）演示：http://jsfiddle.net/0yphnkmL/2/
的CSS：
#hover
{
width:200px;
height:100px;
display:none;
fill:white;
border:1px solid #eee;
position:absolute;
bottom:20px;
left:10px;
}
#graphic_volunteer_print:hover +#hover
{
display:block;
}
HTML：
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1336px" height="318px" viewBox="0 0 1336 318" enable-background="new 0 0 1336 318" xml:space="preserve">
<rect id="buc" x="1" fill="#BBBBAA" width="1089" height="291"/> <?xml-stylesheet type="text/css" href="stylesvg.css"?>
<rect id="ams" x="1088" fill="#C7B299" width="248" height="291"/>
<polygon id="graphic_logo" fill="#F08F1D" stroke="#F15A24" stroke-miterlimit="10" points="1266.5,170.5 1077.5,170.5 1077.5,68.5
1266.5,68.5 1288.8,119.5 "/>
<rect id="languages" x="146.5" y="125.5" fill="#0095FF" stroke="#0060A1" stroke-miterlimit="10" width="102" height="45"/>
<text transform="matrix(1 0 0 1 127.5567 142.5293)" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784">Technical suport in talian</text>
<rect id="tourism_guide" x="450.5" y="68.5" fill="#0071BC" stroke="#003659" stroke-miterlimit="10" width="627" height="102"/>
<text transform="matrix(1 0 0 1 455.9814 88.6112)" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784">Incoming Tour Guide</text>
<rect id="graphic_pr" x="570.5" y="125.5" fill="#F7931E" stroke="#F15A24" stroke-miterlimit="10" width="73" height="45"/>
<text transform="matrix(1 0 0 1 575.5356 143.9356)" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784">PR Assistant</text>
<text transform="matrix(1 0 0 1 15.0342 38.9139)" fill="#1A1A1A" font-family="'Agency Fb'" font-size="16.8784">Bucharest</text>
<text transform="matrix(1 0 0 1 1096.8906 38.9141)" fill="#1A1A1A" font-family="'Agency Fb'" font-size="16.8784">Amsterdam</text>
<rect id="graphic_teacher_volunteer" x="780" y="77" fill="#FBB03B" width="12" height="93"/>
<text transform="matrix(1 3.400014e-003 -3.400014e-003 1 791.6746 99.1751)" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8783">Teacher of Graphic Design</text>
<text transform="matrix(1 0 0 1 794.9139 118.8516)" fill="#1A1A1A" font-family="'Agency Fb'" font-size="17.3111">Vo</text>
<polygon id="graphic_volunteer_print" fill="#F7931E" stroke="#F15A24" stroke-miterlimit="10" points="1266.2,170.5 1139.5,170.5
1139.5,93.5 1266.2,93.5 1283.6,132 "/>
<g id="hover">
<rect fill="#fff" x="1100" y="50" fill="#FBB03B" width="300" height="200"/>
<text transform="matrix(1 0 0 1 1143.3047 109.7091)" fill="#000" font-family="'Agency Fb'" font-size="16.8784">
DTP for music teachers' books. Software used: Word (as there are many multi-page tables that cannot automatically be transferred to InDesign) and InDesign (for the covers)
</text>
</g>
<text transform="matrix(1 0 0 1 1143.3047 109.7091)" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784">Graphic Designer </text>
<text transform="matrix(1 0 0 1 606.5869 279.8994)" fill="#1A1A1A" font-family="'Raleway-Regular'" font-size="16.8784">E d u c a t i o n</text>
<text transform="matrix(1 0 0 1 600.0967 23.2061)" fill="#1A1A1A" font-family="'Raleway-Regular'" font-size="16.8784">E x p e r i e n c e</text>
<polygon id="web_freelancer" fill="#C1272D" points="1266.4,170 1243,170 1243,131 1266.4,131 1276.9,150.5 "/>
<g>
<text transform="matrix(0.9985 -5.487938e-002 5.487938e-002 0.9985 1250.528 148.2357)" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784">Web Designer</text>
</g>
<text transform="matrix(1 0 0 1 1251.6083 165.6192)" font-family="'Agency Fb'" font-size="16.8784">Fr</text>
<rect id="tourism_agent" x="983.5" y="125.5" fill="#1383CF" stroke="#004D80" stroke-miterlimit="10" width="90" height="45"/>
<text transform="matrix(1 0 0 1 990.4646 142.5293)" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784">Travel Agent for Europe</text>
<rect id="web_freelancer_quasar" x="948.5" y="125.5" fill="#C1272D" stroke="#470E11" stroke-miterlimit="10" width="35" height="45"/>
<text transform="matrix(1 0 0 1 959.7529 101.8564)" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784">Web Designer</text>
<line id="bara" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="955" y1="90" x2="955" y2="148"/>
<text transform="matrix(1 0 0 1 456.9197 111.1162)" fill="#1A1A1A" font-family="'Agency Fb'" font-size="16.8784">Fr</text>
<text transform="matrix(1 0 0 1 575.5359 164.5643)" fill="#1A1A1A" font-family="'Agency Fb'" font-size="14.6768">Ft</text>
<rect id="languages_french" x="643.5" y="125.5" fill="#0095FF" stroke="#003D66" stroke-miterlimit="10" width="287" height="45"/>
<text transform="matrix(1 0 0 1 648.4424 143.9364)" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784">Customer service in French</text>
<text transform="matrix(1 0 0 1 653.6263 163.1581)" fill="#1A1A1A" font-family="'Agency Fb'" font-size="16.8784">Pt</text>
<rect id="academic_edu_arts" x="118" y="200" fill="#006837" width="425" height="45"/>
<rect id="academic_edu_arts_master" x="1097" y="200" fill="#006837" width="142" height="45"/>
<text transform="matrix(1 0 0 1 203.7442 222.2325)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784">Bachelor of Arts - National University of Arts </tspan><tspan x="237" y="0" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784" letter-spacing="13"> </tspan><tspan x="253.2" y="0" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784"> </tspan><tspan x="261.1" y="0" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784" letter-spacing="40"> </tspan><tspan x="303.8" y="0" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784" letter-spacing="47"> </tspan><tspan x="354.4" y="0" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784"> </tspan><tspan x="365" y="0" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784" letter-spacing="37"> </tspan><tspan x="405.1" y="0" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784" letter-spacing="47"> </tspan><tspan x="860.8" y="0" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784"> Master of Arts - Vrije University</tspan></text>
<rect id="graphic_photoshop_education" x="565" y="200" fill="#F7931E" width="69" height="45"/>
<rect id="tourism_agent_edu" x="686" y="200" fill="#0071BC" width="97" height="45"/>
<text transform="matrix(1 0 0 1 700.6321 217.543)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784">Travel Agent </tspan><tspan x="7.9" y="20.3" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784">and Guide</tspan></text>
<rect id="web_edu" x="837" y="200" fill="#C1272D" width="85" height="45"/>
<text transform="matrix(1 0 0 1 841.6562 217.5419)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784">HTML and CSS </tspan><tspan x="8.4" y="20.3" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784">Developper</tspan></text>
<text transform="matrix(1 0 0 1 552.4734 220.3575)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784">Adobe Photoshop </tspan><tspan x="24.5" y="20.3" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784">Designer</tspan></text>
<text transform="matrix(1 0 0 1 959.7537 119.5556)" fill="#1A1A1A" font-family="'Agency Fb'" font-size="16.8784">Fr</text>
<polygon id="arrow_right" fill="#333333" stroke="#E6E6E6" stroke-miterlimit="10" points="1268.2,200.5 1136.5,200.5 1136.5,169.5
1268.2,169.5 1283.6,185 "/>
<rect id="_x32_014" x="994.5" y="169.5" fill="#333333" stroke="#E6E6E6" stroke-miterlimit="10" width="142" height="31"/>
<rect id="_x32_013" x="1136.5" y="-236.5" fill="#333333" stroke="#E6E6E6" stroke-miterlimit="10" width="131" height="31"/>
<rect id="_x32_012" x="852.5" y="169.5" fill="#333333" stroke="#E6E6E6" stroke-miterlimit="10" width="142" height="31"/>
<rect id="_x32_011" x="710.5" y="169.5" fill="#333333" stroke="#E6E6E6" stroke-miterlimit="10" width="142" height="31"/>
<rect id="_x32_010" x="568.5" y="169.5" fill="#333333" stroke="#E6E6E6" stroke-miterlimit="10" width="142" height="31"/>
<rect id="_x32_009" x="426.5" y="169.5" fill="#333333" stroke="#E6E6E6" stroke-miterlimit="10" width="142" height="31"/>
<rect id="_x32_008" x="284.5" y="169.5" fill="#333333" stroke="#E6E6E6" stroke-miterlimit="10" width="142" height="31"/>
<rect id="_x32_007" x="142.5" y="169.5" fill="#333333" stroke="#E6E6E6" stroke-miterlimit="10" width="142" height="31"/>
<rect id="_x32_006" x="0.5" y="169.5" fill="#333333" stroke="#E6E6E6" stroke-miterlimit="10" width="142" height="31"/>
<text transform="matrix(0.9968 0 0 1 55.9614 189.1788)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="16.8784">06</text>
<text transform="matrix(0.9968 0 0 1 203.1777 189.1788)" fill="#E6E6E6" font-family="'MyriadPro-Regular'" font-size="16.8784">07</text>
<text transform="matrix(0.9968 0 0 1 348.2436 189.1787)" fill="#E6E6E6" font-family="'MyriadPro-Regular'" font-size="16.8784">08</text>
<text transform="matrix(0.9968 0 0 1 483.2709 189.1786)" fill="#E6E6E6" font-family="'MyriadPro-Regular'" font-size="16.8784">09</text>
<text transform="matrix(0.9968 0 0 1 635.4096 189.1786)" fill="#E6E6E6" font-family="'MyriadPro-Regular'" font-size="16.8784">10</text>
<text transform="matrix(0.9968 0 0 1 768.3261 189.1786)" fill="#E6E6E6" font-family="'MyriadPro-Regular'" font-size="16.8784">11</text>
<text transform="matrix(0.9968 0 0 1 913.6699 189.1776)" fill="#E6E6E6" font-family="'MyriadPro-Regular'" font-size="16.8784">12</text>
<text transform="matrix(0.9968 0 0 1 1050.5703 189.1786)" fill="#E6E6E6" font-family="'MyriadPro-Regular'" font-size="16.8784">13</text>
<text transform="matrix(0.9968 0 0 1 1196.8506 189.1788)" fill="#E6E6E6" font-family="'MyriadPro-Regular'" font-size="16.8784">14</text>
<line id="bara_oriz" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="783" y1="82" x2="818" y2="82"/>
<text transform="matrix(1.1875 0 0 1 152.4101 161.751)" fill="#1A1A1A" font-family="'Agency Fb'" font-size="16.8784">Pt</text>
<text transform="matrix(1 0 0 1 1144.0088 129.0498)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'Agency Fb'" font-size="17.3111">Leerorkest</tspan><tspan x="0" y="20.8" fill="#1A1A1A" font-family="'Agency Fb'" font-size="17.3111">Vo </tspan></text>
<text transform="matrix(1 0 0 1 990.4637 161.7509)" fill="#1A1A1A" font-family="'Agency Fb'" font-size="16.8784">Ft</text>
<text transform="matrix(1 0 0 1 1081.8868 82.9871)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'Agency Fb'" font-size="16.8784">Logo Designer</tspan><tspan x="0" y="20.3" fill="#1A1A1A" font-family="'Agency Fb'" font-size="16.8784">Fr</tspan></text>
<text transform="matrix(1.1875 0 0 1 5.9209 310.8965)" fill="#1A1A1A" font-family="'Agency Fb'" font-size="16.8784">Pt</text>
<text transform="matrix(1 0 0 1 26.2607 310.8964)" fill="#333333" font-family="'Agency Fb'" font-size="16.8784">Part-time Job</text>
<text transform="matrix(1 0 0 1 214.6704 310.8965)" fill="#1A1A1A" font-family="'Agency Fb'" font-size="16.8784">Ft</text>
<text transform="matrix(1 0 0 1 231.7796 310.8964)" fill="#333333" font-family="'Agency Fb'" font-size="16.8784">Full-time Job</text>
<text transform="matrix(1 0 0 1 120.5528 310.8964)" fill="#1A1A1A" font-family="'Agency Fb'" font-size="16.8784">Fr</text>
<text transform="matrix(1 0 0 1 137.4082 310.8964)" fill="#333333" font-family="'Agency Fb'" font-size="16.8784">Freelancer</text>
<text transform="matrix(1 0 0 1 323.4554 310.7891)" fill="#1A1A1A" font-family="'Agency Fb'" font-size="17.3111">Vo</text>
<text transform="matrix(1 0 0 1 343.7661 310.8964)" fill="#333333" font-family="'Agency Fb'" font-size="16.8784">Volunteer</text>
<rect id="leg_porto" x="924.5" y="294.5" fill="#F7931E" stroke="#F15A24" stroke-miterlimit="10" width="23" height="23"/>
<g>
<text transform="matrix(1 0 0 1 954.8308 310.2246)" fill="#333333" font-family="'Agency Fb'" font-size="16.8784">Graphic Design</text>
</g>
<rect id="leg_albastru" x="609.5" y="294.5" fill="#0095FF" stroke="#003D66" stroke-miterlimit="10" width="23" height="23"/>
<text transform="matrix(1 0 0 1 639.7676 310.3338)" fill="#1A1A1A" font-family="'Agency Fb'" font-size="16.8784">Language jobs</text>
<rect id="leg_verde" x="413" y="294" fill="#006837" width="23" height="22"/>
<text transform="matrix(1 0 0 1 442.8544 309.6308)" fill="#1A1A1A" font-family="'Agency Fb'" font-size="16.8784">Academic Education - Arts</text>
<rect id="leg_bleu" x="755.5" y="294.5" fill="#0071BC" stroke="#003659" stroke-miterlimit="10" width="23" height="23"/>
<text transform="matrix(1 0 0 1 786.0469 310.2256)" fill="#1A1A1A" font-family="'Agency Fb'" font-size="16.8784">Tourism Language Jobs</text>
<rect id="leg_rosy" x="1060" y="294" fill="#C1272D" width="23" height="22"/>
<text transform="matrix(1 0 0 1 1089.8574 310.9288)" fill="#1A1A1A" font-family="'Agency Fb'" font-size="16.8784">Front end Development</text>
</svg>
答案 0 :(得分：1)
原因是到时候只能悬停一个标签。出现信息框，鼠标不再位于橙色多边形上，但悬停在信息框上。所以信息框消失了，因为橙色多边形会丢失悬停，但是在消失之后橙色多边形会再次悬停。