title: javafx ImageView how to use css hover
body: <p>I have made some custom buttoms with the JavaFX using ImageView</p>
  
  <pre><code>&lt;ImageView fitHeight="25.0" fitWidth="25.0" onMouseClicked="#doExit" onMouseEntered="#doHighLight" onMouseExited="#doReset" pickOnBounds="true" preserveRatio="true" AnchorPane.bottomAnchor="1.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" fx:id="xIcon"&gt;
      &lt;image&gt;
          &lt;Image url="@imges/icons/x.png" /&gt;
      &lt;/image&gt;
  &lt;/ImageView&gt;
  </code></pre>
  
  <p>in order to do highlighting I have used mouse listeners </p>
  
  <pre><code>public void doHighLight(){
      //System.out.println(xIcon.getImage());
      Image itmp= new Image("/gui/imges/icons/xSelected.png");
      xIcon.setImage(itmp);
      //xIcon.setImage(new Image("./imges/icons/x.png"));
      }
  
  public void doReset(){
      xIcon.setImage(new Image("/gui/imges/icons/x.png"));
  }
  </code></pre>
  
  <p>As you can see it not the best way to do it so I have tried some css but its not working. Why?</p>
  
  <pre><code>#xIcon:HOVER {
      -fx-image: url('@../imges/icons/xSelected.png');
  } 
  </code></pre>
  
  <p>the file locations are as follows :</p>
  
  <pre><code>/app/GuiController.java
  /gui/style/main.css
  /gui/imges/icons/x.png
  /gui/imges/icons/xSelected.png
  </code></pre>