Question

我正在尝试使用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 }

Answer 1

你的测试代码在其标记中有两次#trigger（一次在html中，一次在svg中），所以如果有另一个svg #trigger，jQuery会忽略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');
  }
);

Answer 2

这样的事情......

$("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>

使用svg path作为通过jquery显示div的触发器

2 个答案: