2

The problem is when focused and hover pseudo class are used together, then when the ImageView is clicked it doesn't perform focused pseudo class work rather it performs the work of no pseudo class and if I remove the hover pseudo class then it works fine but when unfocused I cannot perform the hover effect. Where as l1 is the I'd for user ImageView in the upper Anchorpane

CSS Code:

#l1
{
    -fx-image : url(logo/user.png);
}
#l1:hover
{
    -fx-image : url(logo/user1.png);
}
#l1:focused
{
    -fx-image : url(logo/user1.png);
}

enter image description here

Slaw
  • 37,820
  • 8
  • 53
  • 80
Bibek Bhusan Sahoo
  • 37
  • 5

1 Answers1

0

Could it just be as simple as a misspelling? The psuedo-class I believe you are looking for is :focus not :focused. See here: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

I have never heard of :focused.

EDIT: Apparently I was wrong and it actually is spelled differently in JavaFX CSS. Disregard above.

That being said, I did not really understand what you are trying to do because your description was not written very clearly. If my above suggestion doesn't work I would be happy to help you work it out but I would need you to make your question more clear.

Beyond that, if the snippet you included contains the actual styles and ID names, I have just a couple small suggestions for you.

1. l1 is a really bad name for a selector. On top of being unsemantic and not giving you or future developers any indication of what it actually is, it also falls into the problem of the l and 1 characters looking very similar. This invites confusion with some many different fonts. Semantic selector names are a best practice. You can read more about good CSS naming conventions in this guide here: https://cssguidelin.es/#naming-conventions

2. From a UI perspective, underlines tend to indicate to people that what is being underlined is a link. Underlining an element heading like you did with "User Login" is somewhat visually unappealing and also misleading to users. See the "Do's and Don'ts" in the WPF UI Guidelines here: https://cdn.wfp.org/guides/ui/v0.14.0/basics/typography/ Or the Nielsen Norman Group's Guidelines for Visualizing Links here: https://www.nngroup.com/articles/guidelines-for-visualizing-links/

Stephen M Irving
  • 1,324
  • 9
  • 20
  • I want to use focus effect when clicked and the image inside should change accordingly but when I click it again it should unfocus and then if I try to hover on that ImageView , image should change according to the hover effect – Bibek Bhusan Sahoo Dec 17 '19 at 15:22
  • The OP is using JavaFX which has its own special blend of CSS. In this context, the focus pseudo-class is in fact `:focused` (as documented [here](https://openjfx.io/javadoc/13/javafx.graphics/javafx/scene/doc-files/cssref.html#node)). – Slaw Dec 17 '19 at 15:24
  • Ah, well my mistake then. That seems pretty dumb to me though. Why would they decide to change the way the selector is spelled? What point would that serve beyond confusing people? – Stephen M Irving Dec 17 '19 at 15:25
  • Most likely to match the name of the [corresponding property](https://openjfx.io/javadoc/13/javafx.graphics/javafx/scene/Node.html#focusedProperty) in the `javafx.scene.Node` class. – Slaw Dec 17 '19 at 15:26
  • Ah, ok. That makes some sense then. Thanks for the explanation, I appreciate it. It does seem like if they were going to change the language around that they should have named it something different to indicate it is a CSS variant and not the exact same thing. JCSS or something like that. – Stephen M Irving Dec 17 '19 at 15:28