Javascript 带文本标签的按钮：即使在文本标签上，如何保持悬停颜色？_Javascript_Css_Svg_D3.js

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

javascript css svg d3.js

Javascript 带文本标签的按钮：即使在文本标签上，如何保持悬停颜色？,javascript,css,svg,d3.js,Javascript,Css,Svg,D3.js,我正在尝试创建一个带有文本标签的按钮，我希望按钮和标签都能响应单击，并且，我想要一个悬停颜色。除了在文本标签上失去悬停颜色外，此代码可以正常工作。当悬停在文本标签上时，我需要添加什么或以不同的方式保持悬停颜色 <!DOCTYPE html> <style> #resetButton { cursor: pointer; fill: #FFF68F; } #resetButton:hover { cursor: pointer; fill: #FFFF00;

我正在尝试创建一个带有文本标签的按钮，我希望按钮和标签都能响应单击，并且，我想要一个悬停颜色。除了在文本标签上失去悬停颜色外，此代码可以正常工作。当悬停在文本标签上时，我需要添加什么或以不同的方式保持悬停颜色

<!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>


#重置按钮{
光标：指针；
填充：#FFF68F；
}
#重置按钮：悬停{
光标：指针；
填充：#FFFF00；
}
var svg=d3。选择（“#main”）
.append（'svg'）
var g=svg.append（“g”）
.attr（{id:“resetButton”}）
g、 追加（'circle'）//重置按钮
.attr（{cx:100，cy:100，r:25}）
.attr（{id:“resetButton”}）
.attr（{onclick:“doSomething（）”}）
g、 追加（'text'）//按钮标签
.attr（{x:100，y:95}）
.attr（{fill:“black”}）
.attr（{“字体大小”：20}）
.attr（{“文本锚定”：“中间”}）
.text（'R'）
.attr（{onclick:“doSomething（）”}）
doSomething=函数（）{
警报（“重置”）
}

关闭文本元素的指针事件

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

谢谢。。。我永远也找不到那种属性！