带文本标签的按钮:即使在文本标签上，我如何保持悬停颜色

Button with text label: How do I keep the hover color even when over text label?

本文关键字：文本标签 悬停 颜色 何保持 按钮      更新时间：2023-09-26

我正在尝试创建一个带有文本标签的按钮，我希望按钮和标签都能对点击做出响应，并且，我想要悬停颜色。除了在文本标签上悬停时丢失悬停颜色之外，此代码仍然有效。当悬停在文本标签上时，我需要添加什么或做什么不同的操作来保持悬停颜色？

<!DOCTYPE html>
<style>
#resetButton {
  cursor: pointer;
  fill: #FFF68F;
}
#resetButton:hover {
  cursor: pointer;
  fill: #FFFF00;
}
</style>
<div id = "main"> </div>
<script src = "http://d3js.org/d3.v3.min.js"> </script>
<script>
var svg = d3.select('#main')
    .append('svg')
var g = svg.append("g")
  .attr({id: "resetButton"})
g.append('circle') // reset button
  .attr({cx: 100, cy: 100, r: 25})
  .attr({id: "resetButton"})
  .attr({onclick: "doSomething()" })
g.append('text') // button label
  .attr({x: 100, y: 95})
  .attr({fill: "black"})
  .attr({"font-size":  20})
  .attr({"text-anchor": "middle"})
  .text('R')
  .attr({onclick: "doSomething()" })
doSomething = function() {
  alert("Reset")
}
</script>

关闭文本元素的指针事件。

g.append('text') // button label
  .attr({"pointer-events": "none"})
  ...

此处演示

相关文章：