Button Hover CSS

Universal Dashboard
#1

Hey guys,
Has anyone been able to use :hover on UD buttons? I want to be able to have a button hidden until either the button itself or another element is moused over. In theory you should just be able to have display:none on the button and then use .btn:hover {display:inline-block} to show the button when the mouse goes over it but that doesn’t seem to work with UD buttons. I know there are other classes like .ud-button, .button, .btn-small, btn-large but setting these doesn’t seem to work either. Has anyone tried doing this before?

Product: PowerShell Universal Dashboard
Version: 2.9

#2

You could use -stylesheets attached to New-UdDashboard and point to css, then have a UdElement, with style attributes that contans the button. You can then style the button however you like

CSS:
.div-hover-btn .MuiButton-root {
color: white !important;
}
.div-hover-btn:hover .MuiButton-root {
color: green !important;
}

Element:
New-UdElement -Tag ‘div’ -Attributes @{ className = ‘div-hover-btn’ } -Content {
New-UdButton …
}
}

or something similar with New-UdStyle

#3

Good idea with the style sheets. I haven’t actually used that yet so I’ll have a play around. I use new-udstyle a lot but for this particular case it doesn’t seem to work. It applies everything else to the button but anything with :hover on the end isn’t applied for some reason. I’ll have a go using a style sheet and see if that gets around the problem though. :smiley:

#4

I was in the same boat, then moved all Style elements to CSS and its so much easier to deal with. I have hover working with the thoery above.