我正在处理此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这样的库,但是对于这个小任务来说它们太复杂了,请帮帮我,谢谢
答案 0 :(得分:2)
使用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库。
答案 1 :(得分:0)
尝试以下代码
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>