AnchorPane在鼠标点击填充上

Question

有没有办法让AnchorPane包含按钮而少量Text来点击它就像按钮一样？我正在使用JavaFX和CSS，这是我的代码。一切正常但不填充

FXML

<AnchorPane id="pane" fx:id="pane" layoutX="65.0" layoutY="68.0" prefHeight="90.0" prefWidth="309.0" onMouseClicked="#onSickleButtonClicked" stylesheets="@style.css">
  <children>
     <Text fx:id="sickleLevelLabel" layoutX="193.0" layoutY="27.0" strokeType="OUTSIDE" strokeWidth="0.0" text="1" wrappingWidth="95.13671875">
        <font>
           <Font size="24.0" />
        </font>
     </Text>
     <Button id="sickleButton" fx:id="sickleButton" disable="true" ellipsisString="" mnemonicParsing="false" opacity="0.0" prefHeight="76.0" prefWidth="298.0"  visible="false">
  </Button>
     <Text fx:id="sickleUpCostLabel" layoutX="129.0" layoutY="66.0" strokeType="OUTSIDE" strokeWidth="0.0" text="10" wrappingWidth="60.136717826128006">
        <font>
           <Font size="20.0" />
        </font>
     </Text>
     <Text fx:id="sickleIncomeLabel" layoutX="237.0" layoutY="66.0" strokeType="OUTSIDE" strokeWidth="0.0" text="2" wrappingWidth="51.749999821186066">
        <font>
           <Font size="20.0" />
        </font>
     </Text>
  </children>
</AnchorPane>

CSS

#pane{
    -fx-background-image: url(../Resources/sicklebutton.png);
    -fx-background-size: 300 80;
    -fx-background-repeat: no-repeat;
    -fx-background-color: rgba(0,0,0,0);
}
#pane:hover{
    -fx-effect:dropshadow(gaussian, rgba(0, 8, 29, 1), 10, 0, 0, 0);
    -fx-cursor: hand;
}
#pane:pressed{
    -fx-effect:dropshadow(gaussian, rgba(0, 8, 29, 1), 30, 0, 0, 0);
    -fx-padding: 5,5,5,5;  
}
#pane:disabled {
    -fx-opacity: 0.6;
}