I am working on a SAPUI5/Fiori project, and I'm facing difficulties in customizing the hover color for buttons. I want the hover color to be #D4A418 when the cursor passes over the buttons. The problem seems to be related to the predefined class "sapMBtnHoverable," which is interfering with my custom styles.
I have already tried various ways to override the styles, but the default hover color persists. When I toggle off the "sapMBtnHoverable" class in the browser console, the hover effect looks exactly as I want it to.
Additionally, when a button is selected, a blue border appears, and I suspect it is related to the "sapMFocusable" class and the same problem as the hover.
Below i show my XML and CSS:
Thank you!
<mvc:View
xmlns:core="sap.ui.core"
xmlns:form="sap.ui.layout.form"
controllerName="torneiobelio.torneiobelio.controller.Main"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:tnt="sap.tnt"
height="100%"
width="100%">
<tnt:ToolHeader class="navBar">
<Button
text="Players"
type="Transparent"
class="sapMBtnBase sapMBtn navButtonText customHoverColor sapMBarChild"
>
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow"/>
</layoutData>
</Button>
<Button
text="UEFA"
type="Transparent"
class="navButtonText"
>
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow"/>
</layoutData>
</Button>
<Button
icon="sap-icon://home"
type="Transparent"
class="navButtonIcon"
>
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow"/>
</layoutData>
</Button>
<Button
text="Leagues"
type="Transparent"
class="navButtonText"
>
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow"/>
</layoutData>
</Button>
<Button
text="Prizes"
type="Transparent"
class="navButtonText"
>
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow"/>
</layoutData>
</Button>
</tnt:ToolHeader></mvc:View>
.sapMBtn.navButtonText:hover .sapMBtnContent {
border-bottom: 2px solid #D4A418 !important;
color: #D4A418 !important;
}
.sapMBtn.navButtonText:active .sapMBtnContent {
color: #D4A418 !important;
border-bottom: 2px solid #D4A418 !important;
}
.navButtonIcon .sapMBtnIcon {
font-size: 3rem !important;
}