如何取消sap.m.List的悬停功能？影响该功能的因素有哪些？

Hey there! Let's tackle your two questions about disabling and understanding the hover behavior in sap.m.List components:

Here are a few practical ways to remove that hover color change on list items:

Method 1: Set List Item Type to "Inactive" #

If you don't need any interactive behavior (like clicks or navigation) for your list items, this is the simplest fix. Setting the type property to Inactive completely disables all interactive states—including hover.

XML View Example: #

<List>
    <StandardListItem 
        type="Inactive" 
        title="Sample List Item" 
        description="Optional supporting text"
    />
</List>

JavaScript Example: #

new sap.m.List({
    items: [
        new sap.m.StandardListItem({
            type: "Inactive",
            title: "Sample List Item"
        })
    ]
});

Method 2: Override Hover Styles with CSS #

If you still need interactive functionality (like click events) but just want to eliminate the hover color shift, override the default CSS classes for list item hover states:

Add this custom CSS to your project:

/* Disable hover background for all sap.m.List items */
.sapMLI:hover,
.sapMLIHover {
    background-color: transparent !important;
    /* Alternatively, match the default list background to make hover unnoticeable */
    /* background-color: var(--sapList_Background) !important; */
}

Method 3: Adjust Theme Parameters #

If you're using a custom UI5 theme, modify the sapList_Hover_Background parameter to match the default list background color (sapList_Background). This makes the hover state visually identical to the default state.

These are the key elements that influence whether and how hover works for sap.m.List:

• List Item Type:
  • Interactive types like Active, Navigation, or Detail enable default hover states (since they're designed for user interaction).
  • The Inactive type disables all interactive states, including hover, entirely.
• List Mode:
  • Selection modes like SingleSelectMaster, MultiSelect, or SingleSelectLeft can modify or replace hover behavior with selection-related visual feedback.
• Custom CSS/Theme:
  • Any custom CSS that overrides .sapMLI:hover or .sapMLIHover classes will directly change or disable the hover effect.
  • Theme parameters like sapList_Hover_Background control the default hover color—adjusting this alters the hover appearance.
• UI5 Version:
  • Different UI5 versions may have minor tweaks to hover class names or logic. For example, older versions might use slightly different class prefixes.
• Custom List Item Templates:
  • If you've built a custom list item control (instead of using standard ones like StandardListItem), any custom hover events or styles you add will override the default sap.m.List hover behavior.
• Device Type:
  • On touch-enabled devices, UI5 typically disables hover effects by default (since touch doesn't support hover interactions), while hover works as expected on desktop devices.

内容的提问来源于stack exchange，提问作者Ruth