I have an element I want to grow when hover/mouse held down.
.button-hover-grow-animation:hover {
scale: 1.2 1.2;
}
.button-hover-grow-animation:active {
scale: 1.2 1.2;
}
This works perfectly except for the instance where,
-
Hover mouse over button (it grew)
-
Press on the left mouse button and move mouse off, it shrinks.
-
Keep pressing left mouse button and move back onto button, it doesn’t grow.
Is this normal functionally or is it a bug?
Thanks!
Hi MousePods,
Could be a bug, but just to make sure:
- What is the element’s pseudo-state in the UI Debugger? Does it become hovered at all, in the 3rd scenario?
- If I understand correctly, you are getting the desired final scale but the transition is being skipped, is that right?
- Are you in Play mode, or in an EditorWindow?
No, it says none.
No, the transition doesn’t happen.
I am in play mode.
In the video, I put the mouse over the button, press the left mouse button, and move it off. Will holding the left mouse button down. I move it back on, it should scale up even though the mouse is pressed down, but it ignores it. You can also see the hover state isn’t working in the debug window.
q7zvf0
The weird thing is, if I press the left mouse button when it isn’t hovering over the button and then hover over it, it works.
Well, it looks very much like a bug to me. Could you open a bug report please?
Bug Report: 1346763
I recently changed the order of my button uxml and it suddenly worked. It seems that my previous layout was the issue. I posted the bug with both the button layouts.
Thanks!
Yes indeed, your change in layout is what did it. When a button has mouse capture, it receives the hover state but its parents don’t, whereas when it doesn’t have mouse capture, then all the elements under the mouse receive the hover state as normal, which explains what you are seeing. Apparently this isn’t a bug, it’s the way the web does it too:
.button-hover-grow-animation {
transition-duration: 0.2s;
transition-property: transform;
}
.button-hover-grow-animation:hover {
transform: scale(1.2);
}
button {
width: 300px;
height: 300px;
}
1 Like
Ah, that makes sense, thanks! Hopefully this will help others who might run into this situation. I will reply to the bug to get it closed.