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 が 2 回 (html に 1 回、svg に 1 回) あるため、jQuerysvg #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 に答える