0

我正在尝试使用 SVG 路径来触发 div 显示，但是当我尝试使用 jquery 执行此操作时，我对复杂图形没有任何运气

这是示例 html：http: //ifelseifelse.com/public/svg/test.html

我有一个使用简单图形的小提琴，所以我知道它可能，但不知道我做错了什么，虽然http://jsfiddle.net/EzfwV/210/

$("#trigger").hover(function(){
    $('.hoverMe').removeClass('hidden');
},function(){
    $('.hoverMe').addClass('hidden');
});

<div class="hoverMe hidden">I was hidden</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path id="trigger" d="M150 0 L75 200 L225 200 Z" />
</svg>

.hidden { display:none }
4

2 回答 2

0

您的测试代码在其标记中有两次 #trigger（一次在 html 中，一次在 svg 中），因此svg #trigger如果有另一个div#trigger. 如果id不是唯一的，你会变成意想不到的结果，或者什么也没有发生。这来自 jquery 的查找机制，id 是唯一的，因此它会在您的 DOM 中第一次命中后分解寻找其他人

看到不同

$("svg #trigger").hover(function(){
    $('.hoverMe').removeClass('hidden');
  },function(){
    $('.hoverMe').addClass('hidden');
  }
);
$("div#trigger2").hover(function(){
    $('.hoverMe').removeClass('hidden2');
  },function(){
    $('.hoverMe').addClass('hidden2');
  }
);
于 2013-04-11T19:35:12.380 回答
0

这样的事情怎么办。。

$("path").hover(function(e){
    var tooltip=(e.target.id).split('_');
    var whichone='#tooltip'+tooltip[1];
    $(whichone).show();
});

<div id="tooltip1">I was hidden1</div>
<div id="tooltip2">I was hidden2</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path id="trigger_1" d="M150 0 L75 200 L225 200 Z" />
    <path id="trigger_2" d="M40 100 L25 300 L225 100 Z" />
</svg>
于 2013-04-11T20:15:53.723 回答