SVG路径上的jQuery鼠标切换--奇怪的bug
SVG路径上的jQuery鼠标切换--奇怪的bug
提问于 2016-11-04 18:33:44
晚上好,
我正在为我的管弦乐队编写一个网站，我正在用图片实现一个组织结构图。我的想法是有一个“地图”的所有座位在管弦乐队，当你悬停在一个座位上用你的鼠标，有关这个人的信息会弹出。多亏了一点jQuery和SVG的调整，我才能做到这一点：
<g id="luc" class="Seats">
<path class="cls-9" d="M441.6,153.2l-6.23,13.41L429.15,180a3.4,3.4,0,0,0,.56,3.71l3.11,3.46,3.11,3.46a3.4,3.4,0,0,0,3.63.94l14-4.82,14-4.82a3.4,3.4,0,0,0,1.42-5.49l-10.85-12-10.85-12a3.4,3.4,0,0,0-5.61.84Z" transform="translate(-10.26 -9.14)" />
</g>
<g id="hugo" class="Seats">
<path class="cls-9" d="M478.17,197.79,468.49,209l-9.68,11.18a3.4,3.4,0,0,0-.49,3.72l2,4.18,2,4.18a3.4,3.4,0,0,0,3.24,1.9l14.75-.78,14.75-.78a3.4,3.4,0,0,0,2.87-4.88L490.9,213.1l-7.11-14.57a3.4,3.4,0,0,0-5.62-.74Z" transform="translate(-10.26 -9.14)" />
</g>
<g id="maxime_d" class="Seats">
<path class="cls-9" d="M501,250.74l-12.39,8.07-12.39,8.07a3.4,3.4,0,0,0-1.49,3.44l.81,4.58.81,4.58a3.4,3.4,0,0,0,2.58,2.72l14.4,3.31,14.4,3.31a3.4,3.4,0,0,0,4.11-3.9l-2.82-16-2.82-16a3.4,3.4,0,0,0-5.2-2.26Z" transform="translate(-10.26 -9.14)" />
</g>
<g id="marie" class="Seats">
<path class="cls-8" d="M320.57,318.25l-5.8-13.6L309,291a3.4,3.4,0,0,0-3.13-2.07h-9.3a3.4,3.4,0,0,0-3.13,2.07l-5.76,13.6-5.76,13.6A3.4,3.4,0,0,0,285,323h32.43a3.4,3.4,0,0,0,3.13-4.73Z" transform="translate(-10.26 -9.14)" />
</g>这些path对应于(按顺序排列)4，3，2，1个座位，图如下：
我的问题是，鼠标可以很好地工作在座位1和2上(当我触摸座椅时会弹出图片)，但不要覆盖3和4的整个座位。
我不知道是什么导致了这个问题，这发生在Chrome，Firefox和Edge上.
我的jQuery代码：
$(".Seats").hover(over, out);
function animateOver(element) {
console.log(element);
var tl = new TimelineLite();
var select = $(element);
var name = select.attr('name');
$("#name_display").html(name);
tl.timeScale(1);
tl.to($("#" + element.id + "_card"), 1, { opacity: 1 });
tl.to($("#name_display"), 1, { opacity: 1 }, '-=1');
tl.play();
return tl;
}
function over() {
//check if this item has an animation
if (!this.animation) {
//if not, create one
this.animation = animateOver(this);
} else {
//or else play it
this.animation.play().timeScale(1);
}
}
function out() {
//reverse animation 4 times normal speed
this.animation.reverse().timeScale(4);
}回答 1
Stack Overflow用户
回答已采纳
发布于 2016-11-04 21:03:43
我发现了我的问题所在:弹出的图片(当我把鼠标放在座位上时)实际上仍然在那里，不透明度为零，并且阻止了“覆盖”的检测！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40429651
复制相关文章
相似问题
腾讯云开发者
