Question

我正在处理此SVG图像，jsfiddle

 <div id='one'>
  items that should appear when hovering over 01(red circle) on the svg image
</div>

<div id='two'>
  items that should appear when hovering over 02(green circle) on the svg image
</div>
<div id='three'>
  items that should appear when hovering over 03(purple circle) on the svg image
</div>

当我将鼠标悬停在相关的SVG圈子上时，我需要显示div，并且当将鼠标悬停在圈子上时，该圈子应该突出显示，

我是JS的新手，不知道从哪里开始，我找了像SVG.js和vivus.js这样的库，但是对于这个小任务来说它们太复杂了，请帮帮我，谢谢

Answer 1

使用jQuery，当鼠标进入并分别离开所需的圆圈时显示/隐藏div。

以下是div切换的片段，请参阅working fiddle

JS

$(function() {
  $("#XMLID_359_").hover(function(){
    $('#one').toggle();
    $(this).addClass('transform');
  });

  $("#XMLID_362_").hover(function(){
    $('#two').toggle();
    $(this).addClass('transform');
  });

  $("#XMLID_67_").hover(function(){
    $('#three').toggle();
    $(this).addClass('transform');
  });

  $("#XMLID_359_,#XMLID_362_, #XMLID_67_").mouseleave(function(){
    $(this).removeClass('transform');
  });
});

CSS

#one, #two, #three{
  display: none;
}
#XMLID_359_, #XMLID_362_, #XMLID_67_{
  transition: all 200ms ease-in;
}
.transform{
  transform: scale(1.1, 1.1);
}
#XMLID_362_.transform{
  transform: scale(1.1, 1.1) translateX(-72.3px);
}

您必须在应用程序中包含jQuery库。

Answer 2

尝试以下代码

function showMe1(){
document.getElementById('one').style.color="";
}

function showMe2(){
document.getElementById('two').style.color="";
}


function showMe3(){
document.getElementById('three').style.color="";
}

document.getElementById('one').style.color="transparent";
document.getElementById('two').style.color="transparent";
document.getElementById('three').style.color="transparent";

 div:hover {
      visibility: visible;
    }

     <div id='one' onmouseover="showMe1()">
      items that should appear when hovering over 01(red circle) on the svg image
    </div>

    <div id='two' onmouseover="showMe2()">
      items that should appear when hovering over 02(green circle) on the svg image
    </div>
    <div id='three' onmouseover="showMe3()">
      items that should appear when hovering over 03(purple circle) on the svg image
    </div>

将鼠标悬停在SVG路径上时如何显示div？

2 个答案: