Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Mouse hover over different Element structures behave differently Bug or Feature?

Discussion in 'UI Toolkit' started by manuelgoellnitz, Oct 23, 2020.

  1. manuelgoellnitz

    manuelgoellnitz

    Joined:
    Feb 15, 2017
    Posts:
    397
    On The left side I have two buttons as siblings but positioned over each other,
    on the right side I have one button as a child of the other. (See screenshots)

    When the mouse is over the "Over Button" in the example on the left, only this button gets the :hover pseudostate
    upload_2020-10-23_9-54-24.png


    When the mouse hovers over the "Inner Button" on the right example, aka the Child-Button, both buttons in the hierarchy get the :hover pseudostate (this is also the case when both buttons are visually not above each other)
    upload_2020-10-23_9-53-47.png

    In the old UI system (as I remember it) the right example should behave like the left.

    Is that a bug or a feature?

    But Click Events behave the same, In both example a click would only be fired on the button the mouse is positioned.
     
    jGate99 likes this.
  2. antoine-unity

    antoine-unity

    Unity Technologies

    Joined:
    Sep 10, 2015
    Posts:
    771
    Can you share the UXML / USS for this?
     
  3. manuelgoellnitz

    manuelgoellnitz

    Joined:
    Feb 15, 2017
    Posts:
    397
    Of course:


    Code (CSharp):
    1. <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    2.     <Style src="styles.uss" />
    3.     <ui:VisualElement>
    4.         <ui:Button text="Under Button" display-tooltip-when-elided="True" name="UndeButton" class="outerButton" />
    5.         <ui:Button text="Over Button" display-tooltip-when-elided="True" name="OverButton" class="innerButton" style="position: absolute;" />
    6.     </ui:VisualElement>
    7.     <ui:VisualElement style="height: 650px; position: absolute; left: auto; right: 0;">
    8.         <ui:Button text="Outer Button" display-tooltip-when-elided="True" name="outerButton" class="outerButton">
    9.             <ui:Button text="Inner Button" display-tooltip-when-elided="True" name="InnerButton" class="innerButton" style="position: absolute;" />
    10.         </ui:Button>
    11.     </ui:VisualElement>
    12. </ui:UXML>
    13.  

    Code (CSharp):
    1. .outerButton {
    2.     width: 500px;
    3.     height: 500px;
    4. }
    5.  
    6. .outerButton:hover {
    7.     background-color: rgb(255, 0, 0);
    8. }
    9.  
    10. .innerButton {
    11.     width: 100px;
    12.     height: 100px;
    13. }
    14.  
    15. .innerButton:hover {
    16.     background-color: rgb(0, 255, 0);
    17. }
    18.  
     
  4. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    I think this is by design. If you look at your StyleSheets top-left Pane in the UI Builder and hover over a class pill in a row, say the ".innerButton" pill, it behaves as expected with both the pill and the row changing background color:
    upload_2020-11-11_16-46-56.png

    This is different for the "The left side" case because it's a assumed you're in some kind of "overlay" mode where you want the forefront element to take all events over the background element. Something like a model popup for example should not let :hover styles be triggered for elements behind it.
     
    manuelgoellnitz likes this.