javascript - 我有一个具有悬停效果的图像，但上面有一个文本，它避免了它

Question

我试图将文本放在图像之上，但如果我将光标移到文本上，我的图像不会呈现动画。我该如何做到这一点，当光标位于文本上方时，即使图像是动画的，也尝试表现得好像文本不存在一样。

怎么才能做到呢？

    const svg = d3.select("body").append("svg").attr("width",1000).attr("height",1000);


    var widthMarker=50;

    var imgContainer = svg.append("g")
      .attr("transform", "translate(228,53)");

    var img = imgContainer.append("svg:image")
    .attr("xlink:href", "marker.svg")
    .attr("width", widthMarker)
    .attr("height", widthMarker)
    .attr("x", 228)
    .attr("y", 50)
    .on('mouseover', function() {
      d3.select(this)
        .transition()
        .ease("bounce")
        .duration(500)
        .attr("height", widthMarker + 50)
        .attr("y", 17);
    })
    .on('mouseout', function() {
      d3.select(this)
        .transition()
        .ease("bounce")
        .duration(500)
        .attr("height", widthMarker)
        .attr("y", 50);
    })
    var text = imgContainer.append("svg:text")
      .attr("dy", widthMarker/2)
      .text("hello world");

    text.attr("dx", (widthMarker - text.node().getComputedTextLength()) / 2)
      .attr("transform", "translate(228,53)");

http://plnkr.co/edit/MfNlziZCJJXFbwfx3t4w?p=preview

Answer 1

您可以使用pointer-events: none

text.attr("指针事件", "无");