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

我认为最简单的方法是创建一个由不可见按钮触发的悬停函数（您必须添加ID），例如：

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")
  }     })

如何对隐藏在不可见元素后面的元素使用鼠标悬停？

2 个答案: