I need help creating a button with a text label that both respond to clicks and have a hover color. The current code I have works, but the hover color is lost when hovering over the text label. How can I modify the code to maintain the hover color even when over the text label?
<!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>