Problems with class marks in object

I have two associated buttons (button1 and button2) to an object that I have defined and I would like to apply the "hover" effect through CSS (since it seems easier to me through class marks) so that the buttons do not appear until you pass the mouse over them.

I have applied the class marks "button1" and "button2" to each button, however I can not give the "hover" effect.

I enclose the object defined with the class marks and the CSS file that I have associated:

var ejemplo = joint.shapes.basic.Generic.define('ejemplo', {
position: {x: 150, y: 50},
size: {width: 80, height: 40},
attrs: {
'.body': {'ref-width': '100%', 'ref-height': '100%', stroke: '#000'},
image: {'xlink:href': 'bombilla.jpg'},
'.button1': {
  cursor: 'pointer', 
  ref: '.body', 
  refWidth: '100%', 
  refHeight: '100%', 
  refX: '100%', 
  refY: '-10%',
  'r': 7,
  event: 'eliminar',
  fill: '#C0392B',
  stroke: 'black',
  strokeWidth: 1
},
'.button2': {
  cursor: 'pointer', 
  ref: '.body', 
  refWidth: '150%', 
  refHeight: '150%', 
  refX: '0%', 
  refY: '-10%',
  'r': 7,
  event: 'rotar',
  fill: 'blue',
  stroke: 'black',
  strokeWidth: 1
},
'.buttonLabel1': {
  pointerEvents: 'none', 
  refX: '100%', 
  refY: '-10%', 
  textAnchor: 'middle', 
  textVerticalAnchor: 'middle', 
  text: 'X',
  fill: 'white',
  fontSize: 8,
  fontWeight: 'bold'
},
'.buttonLabel2': {
  pointerEvents: 'none',
  refX: '0%',
  refY: '-10%',
  textAnchor: 'middle',
  textVerticalAnchor: 'middle', 
  text: 'G', 
  fill: 'white',
  fontSize: 8,
  fontWeight: 'bold' 
  }
}
}, {

markup: [
'<g class="rotatable"><g class="scalable"><image class="body"/></g>',
'<circle class="button1"/><circle class="button2"/>',
'<text class="buttonLabel1"/><text class="buttonLabel2"/>',
'</g>',

]. join(''), 

The CSS file is as follows:

circle.button1.button2 {
/* Enable interacting with inputs only. */
pointer-events: auto;
}

circle.button1.button2 {
color: white;
border: none;
background-color: white;
border-radius: 20px;
width: 15px;
height: 15px;
line-height: 15px;
text-align: middle;
position: absolute;
top: -15px;
left: -15px;
padding: 0;
margin: 0;
font-weight: bold;
cursor: pointer;
}
circle.button1.button2:hover {
background-color: black;
width: 15px;
height: 15px;
line-height: 15px;
}

Does anyone know what I am doing wrong to not apply this effect? Does anyone have another alternative idea to apply the same effect for example with "mouseover"?

Thank you very much.

Pd: I'm using libraries joint and jquery