Как использовать указатель мыши для элемента, скрытого за невидимым элементом?

Question

У меня есть кнопка, которая представляет собой прямоугольник и текст и невидимый прямоугольник сверху. Невидимый прямоугольник помогает убедиться, что пользователь может щелкнуть в любом месте кнопки, в том числе над словом PLAY.

Невидимый прямоугольник препятствует работе моего эффекта .on("mouseover"), который меняет цвет кнопки.

Это мой код -

// svg element
var ticker = d3.select("#ticker").select("svg")
    .attr("width", 300)
    .attr("height", 50);

// group for button elements
ticker = d3.select("#ticker").select("svg")
    .attr("class", "ticker")
    .attr("transform", "translate(0,0)")
    .append("g")

// button with color
ticker.append("rect")
    .attr("class", "pauseplay")
    .attr("x", "120")
    .attr("y", "0")
    .attr("height","30")
    .attr("width","100")
    .attr("rx","5")
    .style("fill","#FF5960")
    .on("mouseover", function() { d3.select(this).style("fill", "#ff7b7b"); })
    .on("mouseout", function() { d3.select(this).style("fill", "#FF5960"); })

  // button text
  ticker.append("text")
    .attr("class","btn-text")
    .attr("x","150")
    .attr("y","20")
    .text("PAUSE")
    .style("fill","white")

  // invisible button
  ticker.append("rect")
  .attr("class","play")
  .attr("x", "120")
  .attr("y", "0")
  .attr("height","30")
  .attr("width","100")
  .style("opacity","0")
  .on("click", function() {
    PAUSED = !PAUSED;
      t.stop();
      // Play it.
      if (!PAUSED) {
        ticker.selectAll(".btn-text").text("PAUSE")
        timer();    }
      // Pause it.
      else {
        ticker.selectAll(".btn-text").text("PLAY")
      }     })

Я бы хотел, чтобы пользователь мог зависать где угодно, но также поменял цвет при наведении курсора.

Answer 1

Вы наклоняетесь назад, вам не нужен этот невидимый прямоугольник. Просто установите для текста pointer-events значение none и добавьте прослушиватель событий в видимый прямоугольник.

Вот ваш код с этим изменением:

// svg element
var ticker = d3.select("#ticker").select("svg")
  .attr("width", 300)
  .attr("height", 50);

// group for button elements
ticker = d3.select("#ticker").select("svg")
  .attr("class", "ticker")
  .attr("transform", "translate(0,0)")
  .append("g")

// button with color
ticker.append("rect")
  .attr("class", "pauseplay")
  .attr("x", "120")
  .attr("y", "0")
  .attr("height", "30")
  .attr("width", "100")
  .attr("rx", "5")
  .style("fill", "#FF5960")
  .on("mouseover", function() {
    d3.select(this).style("fill", "#ff7b7b");
  })
  .on("mouseout", function() {
    d3.select(this).style("fill", "#FF5960");
  })
  .on("click", function() {
    console.log("click")
  })

// button text
ticker.append("text")
  .attr("class", "btn-text")
  .attr("x", "150")
  .attr("y", "20")
  .text("PAUSE")
  .style("fill", "white")
  .attr("pointer-events", "none");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="ticker">
  <svg></svg>
</div>

Answer 2

Я думаю, что самый простой способ - создать функцию наведения, активируемую невидимой кнопкой (необходимо добавить идентификаторы), например:

ticker.append("rect")
.attr("class", "pauseplay")
.attr("id","myID")
.attr("x", "120")
.attr("y", "0")
.attr("height","30")
.attr("width","100")
.attr("rx","5")
.style("fill","#FF5960")
.on("mouseout", function() { d3.select(this).style("fill", "#FF5960"); })

 // invisible button
ticker.append("rect")
.attr("class","play")
.attr("x", "120")
.attr("y", "0")
.attr("height","30")
.attr("width","100")
.style("opacity","0")
.on("mouseover", function() { d3.select("#myID").style("fill", "#ff7b7b"); })
.on("click", function() {
PAUSED = !PAUSED;
  t.stop();
  // Play it.
  if (!PAUSED) {
    ticker.selectAll(".btn-text").text("PAUSE")
    timer();    }
  // Pause it.
  else {
    ticker.selectAll(".btn-text").text("PLAY")
  }     })