Is there a way to show the signpost when hovering an element? For example, if I hover on the icon, the signpost should show up. I'm not into accessibility requirements, I just want to trigger it when hovering.
I got working now. So I just need to use the [(clrIfOpen)] and bind it to a variable. Then I just have to add a mouseenter and a mouseleave event to the icon that set the variable to true or false.
Related
I am using Godot 4. I have a lot of buttons created manually in a container. I have a color variable (tempcol) set in the main scene. When I click a button with the tempcol set say Color.Red- the button's font color changes to white (seems to the default font color) but when I click another button the original button changes to red( the correct button's text is set to the correct color but first set to the wrong color). No button prefab settings seem to make a difference. The Normal Style is set to StyleBoxFlat (which a white background). Is there anything I can do make the font's color immediately appear as the right color?
pressed.connect(c);
func c():
if (get_parent().tempcol!=Color.BLACK):
set("custom_colors/font_color", get_parent().tempcol);
get_parent().check(num,squx,squy,bsqu);
else:
var B1=B.instantiate();
B1._set_position(Vector2(centrex,centrey));
B1.num=num;
get_parent().call_deferred("add_child", B1);
Button States
I'm beginning this answer with a description of the states when using the mouse, as it is the more complex way to interact with the Button.
When you have the Buttons in the scene, unless you have them Disabled, they will be in their Normal state.
When you move the pointer over the Button, it goes from Normal to Hover. And if you move the pointer out, it should return from Hover to Normal.
If you click the Button it goes from Hover to Pressed. And now the button has focus.
When you release the click on top of the Button, it goes from Pressed to Hover (this can happen to fast to see the Pressed state). Then when you move the pointer out of the Button, it goes from Hover to Focus (not to Normal).
Alternatively, you can move the pointer out of the Button instead releasing the click, which also results in the Focus state.
And when you interact with another Control, it goes from Focus back to Normal.
State Graph using mouse
This is the graph of the states of the Button when you are using a mouse:
So we see the Button can take two 5paths from Normal to Normal:
Normal -> Hover -> Normal
Here you moved the mouse pointer over the button, and moved it out.
Normal -> Hover -> Pressed (hover + focus) -> Hover (focus) -> Focus -> Normal
Here you moved the mouse pointer over the Button, pressed and released click, then moved the mouse pointer out and clicked some other Control.
State Graph using touch
When you are using touch input, there is no Hover state, so the graph reduces to this:
And here we have one single path from Normal to Normal: Normal -> Pressed + Focus -> Focus -> Normal. Here you tap the Button, and then tap on some other Control.
Graph State when using keyboard input
When using keyboard it is similar to using touch in that there is no Hover. However, we control Focus independently from Pressed, which results in this:
And here we have three paths from Normal to Normal:
Normal -> Focus -> Normal.
Here you tab into the Button, and tab out of it.
Normal -> Focus -> Pressed + Focus -> Focus -> Normal.
Here you tab into the Button, press and release it, then tab out of it.
Note: You could try to tab out without releasing the Button, which results in the Button going directly from Pressed (Focus) to Normal (It is similar to moving the mouse out from the Button while holding the click). However, I have decided to not count it as separate transition nor path.
Button Color
Alright, now we know the states, what color do we see in each state?
Godot 3:
Normal: custom_colors/font_color.
Hover: custom_colors/font_color_hover.
Pressed: custom_colors/font_color_pressed.
Focus: custom_colors/font_color_focus.
Disabled: custom_colors/font_color_disabled.
Note: When you have Hover combined with Focus, you still get custom_colors/font_color_hover. And when you have Pressed combined with Hover or Focus, you still get custom_colors/font_color_pressed.
Godot 4:
Normal: theme_override_colors/font_color.
Hover: theme_override_colors/font_hover_color.
Pressed: theme_override_colors/font_pressed_color.
Focus: theme_override_colors/font_focus_color.
Disabled: theme_override_colors/font_disabled_color.
Note: Similar to what happens in Godot 3, when you have Hover combined with Focus, you still get theme_override_colors/font_hover_color. And when you have Pressed combined with Hover or Focus you still get theme_override_colors/font_pressed_color. In fact, I could not manage to get theme_override_colors/font_hover_pressed_color.
Your Questions
When I click a button (…) the button's font color changes to white
That is not the Normal color. While you have the Button pressed, you are looking at the Pressed color. Once released, if the mouse pointer is over the Button you are looking at the Hover color. Otherwise, this is the Focus color.
when I click another button the original button changes to red
That is the Normal color.
No button prefab settings seem to make a difference.
Prefab is not a thing. This is Godot.
Is there anything I can do make the font's color immediately appear as the right color?
It is not a matter of "immediately", but what state do you want to change the color for. I suspect you want to set colors for Focus, Hover and Pressed to the same as the color for Normal. And be aware that knowing the state is important for user experience. Which Control has focus is in particular important for keyboard only input.
I set every single theme_override font color.
set("theme_override_colors/font_pressed_color", get_parent().tempcol);
set("theme_override_colors/font_hover_color",get_parent().tempcol);
set("theme_override_colors/font_color", get_parent().tempcol);
set("theme_override_colors/font_focus_color",get_parent().tempcol);
and it was only when I set the font_focus_color did it set change to the correct color immediately.
I have a jsFiddle that illustrates the problem. I'm using the bootstrap CDN on my site. I've overridden the Bootstrap btn-primary class in CSS in order to make them match my site theme.
The problem: btn-primary has a hover that toggles the icon background color to a shade of blue. But when I click on the button, it seems to 'lock' onto the hover color. It will only change back if I click on the page OUTSIDE of the button.
I know I could just add !important to the background line in my CSS, but then I lose the mouseover/hover color change, which I'd like to preserve.
Can anyone explain why this is happening or give me a fix to allow my overridden button to switch back to its desired/initial color after clicking it and mousing off of it? Thanks.
JsFiddle link
Instructions to repro problem from jsFiddle:
See the issue:
1. mouse over the button without clicking. Color changes for mouse on, changes back on mouse off.
2. Mouse over button
3. Click button.
4. Mouse off button.
5. Notice color of button remains the mouseover color, even if you mouse on/off button repeatedly.
6. click page outside of button.
7. notice button now changes back and mouseover behavior is restored.
Looking for a way to retain default mouseover behavior yet override the default bg color of the bootstrap btn-primary.
I want my application's buttons to be green only when I hover over them. Currently, they are green after I click one of them, until I click something else.
For instance, this button is green after clicking on it and before clicking somewhere else.
What's the name of this effect?
I am now looking over my css files, trying to find this effect and replace it with hover so that the buttons are green only when I hover over them.
My guess is that it is applying the style to the :focus pseudo-class.
The :focus CSS pseudo-class is applied when an element has received
focus, either from the user selecting it with the use of a keyboard or
by activating with the mouse (e.g. a form input).
Alternately, the style might be applied by JavaScript in response to click/focus events, either directly to the element, or by adding a class to the element.
As mentioned in the comments by #AdrianoRepetti, use dev tools to help identify how the style is being applied.
when I click on a Bootstrap button, a csss is applied while the mouse button is clicked. This is also visible when the mouse button is hold pressed over a bootstrap button.
I need to change that style, but I can't find it using inspect element. How can I find what style is applied and how can I change it?
I had this problem the other week. If you're using chrome, open inspect element, code highlight the button, right click, select Force Element State, select :focus. This will show you the CSS code that you need to alter.
Having an issue with this myself until I applied the style to .btn-default:active:focus
I have a "split button" from extjs much like the "Menu Button" demo on the extjs demo page at http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/kitchensink/index.html#basic-toolbar. The button has a drop-down arrow on the right side that is a css-background image on a parent tag. When the right side is clicked a menu will drop down with additional selections for the button action. I can click the button or the em but in both cases the menu will not drop down.
I've also tried sending both the button and em javascript events in different orders ( mousedown, mouseup, click, etc) still I can only trigger the main button and cannot get the drop down menu to appear.
Somehow I need to place a mouse click precisely on that background image to get the menu to appear. Would there be a way for watir-webdriver to click at an arbitrary position in the browser? Assuming, of course, that I could get watir-webdriver to give me the current coordinates of the button or em. Or is there some other way to trigger the drop down?
I posted a similar inquiry on the google watir forum, but still have no solution. Thanks for any help that can be provided.
Try this, works like a charm:
b.em(:class, "x-btn-split x-btn-split-right").button(:class, "x-btn-center").send_keys :down
If you are just trying to expand the menu and are not specifically testing the 'click' event, you can send the down key instead:
browser.div(:id, 'splitbutton-1022').send_keys :down
This worked for the sample site on Firefox. I did not try any other browsers.